html - 将最后一列显示为新行

Question

我有一个具有可排序功能的表格。表格中有一个描述列，使得行高非常大。

我想将最后一列(描述列)显示为新行但实际上不是新行。如果我让它成为新行，它会干扰我的排序功能。

我一直在寻找几个小时但徒劳无功。我该怎么做？

换句话说:我想改变这个....

到这个....但应该是1行

相关代码如下:

<tr class=" edit_li fee" id="lineitem" value="fee">
<td class="align_left normal">
    <span>2014-01-27</span>
</td>
<td class="align_center tk_name_hover normal" oldtitle="Penatibus primis." title="" data-hasqtip="true">
    <span class="tk_name ">
    TEST
    </span>
</td>
<td class="align_left no_wrap normal">
    <span>
    Vehicula ultricies sagittis diam metus aptent primis maecenas donec. Feugiat tempus lectus mi felis aenean dictum sodales per suspendisse etiam sem egestas. Risus semper. - 
    </span>
    <span class="tk_name "></span>
</td>
<td class="align_right normal">
    <span title="" class="tk_rate " data-hasqtip="true">
        475.00 
        <div class="unit-small">USD </div>
    </span>
</td>
<td class="align_right normal">2.00</td>
<td class="text-right last">
    <span title="" discount="0" li_tax="0" class="align_right line_item_total" style="display: block" data-hasqtip="true">
        950.00 
        <div class="unit-small">USD </div>
    </span>
</td>

Answer 1

您可以仅在 CSS 中实现此目的，而无需触及 HTML。使用 flexbox，您可以更改每个单元格的顺序，以便所需的单元格出现在最后。然后，通过让 flex 的元素换行，您还可以将所需的单元格放在新的一行上。

More information on flexbox

示例

*{box-sizing:border-box;font-family:arial;font-size:14px;}
table{
    border:1px solid #000;
    border-spacing:0;
    margin:0 auto;
    width:50%;
}
tr{
    display:flex;
    flex-flow:row wrap;
    width:100%;
}
td{
    flex:1 1 25%;
    order:1;
    padding:5px;
}
td:nth-child(3){
    background:#ccc;
    flex:4 1 100%;
    font-weight:bold;
    order:4;
    text-align:center;
}

<table cellpadding="0">
    <tr>
        <td>R1D1</td>
        <td>R1D2</td>
        <td>R1D3</td>
        <td>R1D4</td>
        <td>R1D5</td>
    </tr>
    <tr>
        <td>R2D1</td>
        <td>R2D2</td>
        <td>R2D3</td>
        <td>R2D4</td>
        <td>R2D5</td>
    </tr>
    <tr>
        <td>R3D1</td>
        <td>R3D2</td>
        <td>R3D3</td>
        <td>R3D4</td>
        <td>R3D5</td>
    </tr>
</table>