CODEWITHSUNDEEP
htmlcsshtml-table
Abdus Sattar Bhuiyan
Abdus Sattar Bhuiyan

Reputation: 3074

How to move tfoot at top?

I have a table as follows:

enter image description here

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: enter image description here

Any idea?

Upvotes: 3

Views: 5405

Answers (3)

Hello World
Hello World

Reputation: 2907

A little late but here is how I did.

First write the table following way (1st thead then tfoot then tbody):

<table>
  <thead>...</thead>
  <tfoot class="show-footer-above">...</tfoot>
  <tbody>...</tbody>
</table>

then add following css:

.show-footer-above {
  display: table-row-group;
}

Upvotes: 1

Maciej Kwas
Maciej Kwas

Reputation: 6429

I wouldn't try to hack natural behaviour, for many reasons. Instead I would just make another thead block, with a structure like such:

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

Upvotes: 1

Hasan Tareq
Hasan Tareq

Reputation: 375

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

Upvotes: 7

Related Questions