Web前端开发资源网工作中或许会用到 table 表格固定表头， tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。
今天研究了一下，整理了几种方案：
有的建议使用：position: absolute 或者 position: fixed;
.table thead{
position: absolute;
top: 0;
left: 0;
}或者
.table thead{
position: fixed;
}但是会有一些问题，比如 tbody 会上移，与 thead 重叠；thead 宽度失效，不能和 tbody 对齐等。
而且解决起来比较麻烦，需要把 thead 和 tbody 设置为 display: block; 等等很多地方需要修改。
比较常用的方法是，将 table 的 thead 和 tbody 拆分成两个表格，用 div 包起来，给 div 设置固定高度和 overflow: auto; 属性（其实只给 tbody 的 table 包上 div 就可以）。
代码如下：
<table class="table table-bordered"> <thead> <tr> <th>姓名</th> <th>手机</th> </tr> </thead> </table> <div class="table-box" style="height: 350px;overflow: auto"> <table class="table table-bordered"> <tbody> <tr> <td>张三</td> <td>13333333333</td> </tr> <tr> <td>李四</td> <td>13333333333</td> </tr> ...... </tbody> </table> </div>
此外，要给 table 添加一个 table-layout: fixed; 属性：使列宽由表格宽度和列宽度设定。其他属性参考这篇文章。
.table{
table-layout: fixed;
}这样滚动条是出来了，但是好像还有点问题。两个表格被分开了，而且因为 tbody 多了一个滚定条，导致宽度 和 thead 也不一致。
这是因为 Bootstrap 给 .table 设置了一个下边距 margin-bottom: 20px; ，将其改为 -1px 就可以了。
至于对齐，可以使用 固定宽度，只需要给第一行设置一个宽度，下面的会自动与之对齐。如果表格宽度是 100% ，可以给前几列固定宽度，最后一个不设置，使其宽度自适应。
<table class="table table-bordered"> <thead> <tr> <th style="width: 200px">姓名</th> <th>手机</th> </tr> </thead> </table> <div class="table-box" style="height: 350px;overflow: auto"> <table class="table table-bordered"> <tbody> <tr> <td style="width: 200px">张三</td> <td>13333333333</td> </tr> <tr> <td>李四</td> <td>13333333333</td> </tr> ...... </tbody> </table> </div>
也可以直接用 CSS 选择器进行固定宽度：
.table td:first-child,.table th:first-child{
width: 200px;
}注意，这里的表头是 th ，表体是 td ，都需要设置宽度。
也可以使用 <col> 统一设置列宽： col 的属性在下面详细介绍。
<table class="table table-bordered"> <col style="width: 200px"><!--统一列宽--> <tbody> <tr> <td>张三</td> <td>13333333333</td> </tr> <table>
在 <table> 标签内添加 <col> 标签，统一设置列宽，注意，两个表格都需要加。
效果如下，这样基本上就已经实现功能了。
注意：因为我直接使用的 Bootstrap ，没有出现问题，如果是原生的表格样式出现对不齐的现象，可以尝试把 div 设置为盒模型：
.table-box{
box-sizing: border-box;
}另外，滚动条和上下箭头可能会影响元素的高度或者宽度。
可以参照 CSS滚动条选择器设置滚动条的样式，如下。
以下伪元素选择器可以修改 webkit 浏览器的滚动条样式：
::-webkit-scrollbar 整个滚动条.
::-webkit-scrollbar-button 滚动条上的按钮（上下箭头）
::-webkit-scrollbar-thumb 滚动条上的滚动滑块
::-webkit-scrollbar-track 滚动条轨道
::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-resizer 某些元素的corner部分的部分样式（如：textarea的可拖动按钮）
语法：
::-webkit-scrollbar { styles here }例子：
直接隐藏滚动条：
.table-box::-webkit-scrollbar { /*滚动条整体样式*/
display: none;
}我们试着给滚动条去掉上下箭头，稍微改一下样式。
.table-box::-webkit-scrollbar { /*滚动条整体样式*/
width: 10px;
}
.table-box::-webkit-scrollbar-button{
display: none;
}
.table-box::-webkit-scrollbar-thumb{
border-radius: 20px;
background: rgba(0,0,0,0.3);
}
.table-box::-webkit-scrollbar-track{
background: #edca95;
}如下图：注意，必须给 ::-webkit-scrollbar 设置样式，之后才生效。
col 属性拓展：
<col> 标签可以为表格中一个或多个列定义属性值。
如需对全部列应用样式，则可以使用 <col> 标签，这样就不需要对各个单元和各行重复设置样式了。
注意：只能在 table 或 colgroup 元素中使用 <col> 标签。
未经允许不得转载：Web前端开发资源网 » table固定表头，tbody滚动条样式设置以及填的几个坑
推荐阅读：
phpsStorm实现打开*.jsp文件代码高亮和代码格式化