设置tbody滚动,并固定头部,最需要解决问题是对齐问题,实现在两个方面:1、thead和tbody自动化对齐。2、把滚轮的宽度预留出来。具体代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
/*设置滚动属性*/
tbody {
display: block;
max-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>