table表格，thead固定，tbody滚动条
如上图所⽰之前写的样式不变, 想让 thead 固定不动, tbody 增加滚动条，在样式中添加如下代码
table tbody {
display: block;
height: 195px;
overflow-y: scroll;
}
table thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
table thead {
width: calc( 100% - 1em)
}
提供个简单的 demo  ⽤于测试
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table表格，thead固定，tbody滚动条</title>
<style>
table tbody {
display: block;
height: 195px;
overflow-y: scroll;
}
table thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
table thead {
width: calc( 100% - 1em)
}
table thead th {
background: #ccc;
}
</style>
</head>
<body>
<table width="80%" border="1">      <thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出⽣年⽉</th>
<th>⼿机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
<tr>
<td>张三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴与四⼗⼤盗</td>        </tr>
<tr>
<td>张⼩三</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>
<td>浏阳河就业</td>
</tr>
<tr>
<td>张三疯⼦</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
<tr>
<td>张⼤三</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>          <td>阿⾥巴巴</td>
</tr>
<tr>
<td>张三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>          <td>阿⾥巴巴</td>
</tr>
<tr>
<td>张刘三</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>          <td>阿⾥巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>          <td>阿⾥巴巴</td>
</tr>
</tbody>
</table>
</body>
</html>
>html横向滚动条样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。