为表格添加竖直滚动条并固定表头

来源:互联网 发布:js遍历数组的方法 编辑:程序博客网 时间:2024/04/30 07:16
添加滚动条:
将table放入一个div,给该div添加样式 style="overflow:auto;"

固定表头:
 给<thead>里的<tr>添加 style=" position:fixed;top:XXpx; z-index:2;"
 style里面的top属性可以调整该表头距离浏览器顶端的距离来将它的位置固定,根据自己页面的效果进行调整(有些浏览器可以自动调整其位置)
 z-index:2 表示该表头的显示级优先于 底下设置为 z-index:1的<tr>

然后在<thead>里再添加一个空白的tr来防止 thead里的tr将tbody里的第一行内容遮盖掉,说白了就是将<tbody>中的内容强行往下挤一行,不然<tbody>中的第一行内容会被表头覆盖掉。当然,这个tr必须设置z-index:1
<tr id="filling" style="z-index:1;"></tr>
之后就是tbody
 <tbody id="userBody" style="position:relative;z-index:1;">
原创粉丝点击