这个简单的技巧用来解决使固定表头(thead)和滚动表体 (tbody) 的问题。这使得数据表更易于浏览。当用户滚动表格时，固定表头为用户所注意的列提供了上下文。看下面图示你就明白了：
默认情况下，overflow 属性不适用于表格分组元素 thead, tbody , tfoot。你可以在下面的示例中看到：
See the Pen HTML Table – Exp 1 by vembarrajan (@vemba) on CodePen.0
为了使其工作，
第一步是：设置 tbody 为 display:block ，以便我们可以应用 height 和 overflow 属性。
下一步将是：设置thead 中的 tr元素设置为 display:block。
所以最终的CSS会是:
.fixed_header tbody{
display:block;
overflow:auto;
height:200px;
width:100%;
}
.fixed_header thead tr{
display:block;
}
完整示例：
See the Pen HTML Table by vembarrajan (@vemba) on CodePen.0
这样，创建表格非常简单而且富有语义，并且没有依赖 JavaScript 。
如果你有任何改进建议或发现任何问题，欢迎在评论中拍砖斧正。
文章内容来自：https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc
![[2分钟学个CSS小技巧] 用 CSS 实现一个宽高等比自适应容器-WEB前端开发](/newimg88/2018/12/CSS-220x150.png)
test 2周前 (12-26)说：
龙 3周前 (12-22)说：
leec 3周前 (12-19)说：
yazaky 3周前 (12-17)说：
zhou 4周前 (12-14)说：
一了个头 4周前 (12-14)说：
但是如果某个单元格内容过多，全错位了啊
单元格内容就要自己控制了
表头和单元格会错位
可调整单元格宽度，表格宽度
使表格宽度>所有单元格宽度+滚动条宽度
设置tbody为display: block 会不会有副作用？？
可以试试flex布局
.fixed_header{
display:flex;
flex-direction: column;
height:300px
}
.fixed_header tbody{
flex:1;
overflow-y:auto
}
.fixed_header tr{
display:flex;
}
.fixed_header td,.fixed_header th{
flex:1
}
.fixed_header thead {
background: black;
color:#fff;
}
.fixed_header th, .fixed_header td {
padding: 5px;
}