有时候在不分页且数据多的时候就需要滚动条，或者说是下拉加载的时候也需要滚动条，但是希望在滚动的时候数据的表头固定便于理解表体。
1. 第一种，在tbody元素上进行滚动
这种方式有个缺陷就是所有的单元格的宽度一样，平分整个tr的宽度，不会根绝内容自适应宽度。
如下:
| 表头1 | 表头2 | 表头3 | 表头4 | 表头5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
结果:
有时候需要根据屏幕可用高度来动态设置表格的高度和表头的宽度:(也就是可用宽度不足以显示内容的时候将tbody定高，并且将thead的宽度减去滚动条的宽度使得上下对齐)
| 表头1 | 表头2 | 表头3 | 表头4 | 表头5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
结果:
解释:
display:table 使得子元素平分父元素的宽度 (加在table上无用，必须针对tr设置)table-layout:fixed 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
thead,tbody tr {
display: table;
width: 100%;
table-layout: fixed;
word-break: break-all;
}
table thead{
width: calc(100% - 17px);
}
为了使thead元素和tbody tr的宽度一致
tbody{
display: block;
overflow-x: hidden;
overflow-y: auto;
height: 100px;
}
将tbody元素以块级元素显示并且定高，超过高度自动显示滚动条。
2. 第二种:在table的父元素div元素上进行滚动，外层div滚动的时候表头固定
这种方式有个解决了上面的缺陷，但是有个问题是给人的效果不太平滑。重要代码是封装的JS方法:
| 表头1 | 表头2 | 表头3 | 表头4 | 表头5 |
|---|---|---|---|---|
| 111111111111111111111111的高度发稿的放到大幅度放到官方刚发的的放到放到 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
效果：
文章链接
发表评论