PROMULGATOR
Belong huang
江苏省- Html
- Css
- Js
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
|---|---|---|---|---|
| row 1-0 | row 1-1 | row 1-2 | row 1-3 | row 1-4 |
| row 2-0 | row 2-1 | row 2-2 | row 2-3 | row 2-4 |
| row 3-0 | row 3-1 | row 3-2 | row 3-3 | row 3-4 |
| row 4-0 | row 4-1 | row 4-2 | row 4-3 | row 4-4 |
| row 5-0 | row 5-1 | row 5-2 | row 5-3 | row 5-4 |
| row 6-0 | row 6-1 | row 6-2 | row 6-3 | row 6-4 |
| row 7-0 | row 7-1 | row 7-2 | row 7-3 | row 7-4 |
.fixed_header {
width:400px;
table-layout:fixed;
border-collapse:collapse;
}
.fixed_header tbody {
overflow:auto;
height:100px;
}
.fixed_header thead {
background:black;
color:#fff;
}
.fixed_header th,.fixed_header td {
padding:5px;
text-align:left;
width:200px;
}
.fixed_header tbody {
display:block;
overflow:auto;
height:200px;
width:100%;
}
.fixed_header thead tr {
display:block;
}
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
立即下载
可滚动的tbody
代码描述：用来解决使固定表头(thead)和滚动表体 (tbody) 的问题。
第一步是：设置 tbody 为 display:block ，以便我们可以应用 height 和 overflow 属性。
下一步将是：设置thead 中的 tr元素设置为 display:block。
0