版权声明：本文为博主原创文章，希望能与大家共享。 https://blog.csdn.net/dunegao/article/details/88963067
设置tbody滚动，并固定头部，最需要解决问题是对齐问题，实现在两个方面：1、thead和tbody自动化对齐。2、把滚轮的宽度预留出来。具体代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
/*设置滚动属性*/
tbody {
display: block;
height: 400px;
overflow-y: scroll;
}
/*设置头与内容自动对齐*/
table thead,tfoot,tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
/*给滚动条预留宽度*/
table thead,tfoot {
width: calc( 100% - 1em);
background: #EFF0F5;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="0">
<thead>
<tr>
<th >序号</th>
<th >供应商</th>
<th >部门</th>
<th >档口（车间/仓库）</th>
<th>入库金额</th>
</tr>
</thead>
<tbody>
<tr >
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center">合计</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center">123</td>
</tr>
</tfoot>
</table>
</body>
</html>