How to move tfoot at top?

Question

I have a table as follows:

As you can see there are some search input fields with every columns at the bottom. I want to move it top. i.e: just immediate after the <thead> </thead>.

HTML code (basic structure of table, only 2 rows is considered to share here) is:

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

First I try to create a room below of thead as follows:

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

Room is created as I was expecting but width of every thead cell has been changed as following picture:

Any idea?

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>