我有一张如下表:
如您所见,底部的每一列都有一些搜索输入字段。我想把它移到上面。即:就在 <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;
}
有什么想法吗?
最佳答案
$('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>
关于html - 如何在顶部移动 tfoot?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53497424/