html - 如何在顶部移动 tfoot？

Question

我有一张如下表：

如您所见，底部的每一列都有一些搜索输入字段。我想把它移到上面。即：就在<thead> </thead>.

HTML代码（表格的基本结构，这里只考虑分享2行）为：

<table class="table table-striped table-hover" id="sample_5">
   <thead>
      <tr>
         <th>
            Rendering engine
         </th>
         <th>
            Browser
         </th>
         <th>
            Platform(s)
         </th>
         <th>
            Engine version
         </th>
         <th>
            CSS grade
         </th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>
            Rendering engine
         </th>
         <th>
            Browser
         </th>
         <th>
            Platform(s)
         </th>
         <th>
            Engine version
         </th>
         <th>
            CSS grade
         </th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>
            Trident
         </td>
         <td>
            Internet Explorer 4.0
         </td>
         <td>
            Win 95+
         </td>
         <td>
            4
         </td>
         <td>
            X
         </td>
      </tr>
      <tr>
         <td>
            Trident
         </td>
         <td>
            Internet Explorer 5.0
         </td>
         <td>
            Win 95+
         </td>
         <td>
            5
         </td>
         <td>
            C
         </td>
      </tr>
   </tbody>
</table>

首先，我尝试在下面创建一个房间，如下所示：

table.dataTable {
    margin-top: 84px !important;
    position: relative;
}
thead {
    position: absolute;
    top: -89px;
    display: table-header-group;
}

房间按照我的预期创建，但每个单元格的宽度已更改如下图：

任何想法？

标签： htmlcsshtml-table

Answer 1

$('tfoot').each(function () {
    $(this).insertAfter($(this).siblings('thead'));
});

tfoot {
    display: table-row-group;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr><td>serial</td><td>head</td></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>100</td></tr>
    <tr><td>2</td><td>20</td></tr>
    <tr><td>3</td><td>300</td></tr>
    <tr><td>4</td><td>800</td></tr>
    <tr><td>5</td><td>100</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>2000</td></tr>
  </tfoot>
</table>