Below is the structure of my table:
https://i.stack.imgur.com/QmlVn.png
In the table, there are search input fields at the bottom of each column. I would like to move them to the top, right after the <thead> </thead>.
The basic HTML code for the table (showing only 2 rows) 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>
Initially, I attempted to create a room below the thead using the following CSS:
table.dataTable {
margin-top: 84px !important;
position: relative;
}
thead {
position: absolute;
top: -89px;
display: table-header-group;
}
I successfully created the room as intended, but the width of each thead cell changed as shown in this picture:
https://i.stack.imgur.com/4Uol8.png
Any suggestions?