将最后一列显示为新行

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，您可以更改每个单元格的order，以便最后显示所需的单元格。然后，通过允许弯曲的项目进行换行，您还可以将所需的单元格放到新行上。

More information on flexbox

令我讨厌这个解决方案的一件事是需要为行中的每个单元格创建一个CSS规则，以便为其提供正确的order。如果有人能想出更优雅的方式来实现这一目标，请告诉我。

示例

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

<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>

Answer 2

这解决了我的问题：

<td class="first_td">
<div class="table_row">
  <div class="table_cell">
    <div class="conta_desc">
      <span>
        <b>Description:</b> <%= "#{item.item_description} - " unless item.item_description.blank? %>
      </span>
      <%= "(#{item.task_code})" unless item.task_code.blank? %> <%= "(#{item.activity_code})" unless item.activity_code.blank? %>
      <span class="tk_name <%= validation_class %>"><%= @invoice.validation_errors(item.id) unless @invoice.blank? %></span>
    </div>
  </div>
</div>
</td>

这是CSS：

  .table_row{
    display: table-row;
  }
  .table_cell{
    display: table-cell;
    max-width: 200px;
    white-space: nowrap;
  }
  .conta_desc{
    width: 775px;
    white-space: initial;
  }

输出是：