Question

我有一张桌子，如下：

如您所见，在底部有一些搜索输入字段，每一列。我想把它移到最上面。即：在int startHour = 6; int startMin = 15; int endHour = 8; int endMin = 0; int strat = startHour * 60 + startMin; int end = endHour * 60 + endMin; for(int i = strat; i <= end; i++){ dayBlock[i/60][i%60] = false; }之后。

HTML代码（表的基本结构，这里仅考虑共享2行）是：

<thead> </thead>

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

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

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

有什么主意吗？

Answer 1

出于多种原因，我不会尝试破坏自然行为。相反，我只是制作另一个thead块，其结构如下：

table
    | thead
      | tr...
    | thead
      | tr...
    | tbody
      | tr...

Answer 2

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

Answer 3

$('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>

如何在脚上移动？

3 个答案: