Как двигать вверх ногами?

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>

Сначала я пытаюсь создать комнату под thead следующим образом:

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

Комната создана, как я и ожидал, но ширина каждой ячейки жабы была изменена, как показано на следующем рисунке:

Есть идеи?

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>

Answer 2

Я бы не стал взламывать естественное поведение по многим причинам.Вместо этого я бы просто сделал еще один блок thead со структурой, подобной такой:

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

Answer 3

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