修复可滚动div顶部的表头 [英] Fix table header at top of scrollable div
本文介绍了修复可滚动div顶部的表头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
此示例中的div是可滚动的,如何将表格的标题固定在div的顶部?
The div in this example is scrollable, how do I make the header of the table fixed to the top of the div?
<div id="table" style="overflow: auto; border: 1px solid;">
<table id="table_id">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
推荐答案
我会分成2个部分并指定宽度( %,如果有响应)。
I would split into 2 sections and dictate the widths (% if responsive).
<table id="table-top">
<tr>
<th>A</th>
<th>B</th>
</tr>
</table>
<div id="table">
<table id="table_id">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
CSS ....
#table{
overflow-y: auto;
height:150px;
border-bottom:1px solid grey;
}
table{
width:100%;
}
table td, table th{
border-color: grey;
border: 1px solid;
width:50%;
}
https://jsfiddle.net/tonytansley/mvp4u54q/
这篇关于修复可滚动div顶部的表头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文