htmltable表格设置滚动条table对tbody进⾏设置使其能够进⾏滚动。
⽰例⼀：
效果如下：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
<title>表格滚动</title>
<style>
table,tbody{
display: block;
height: 195px;
border: 0;
border-spacing: 0;
border-collapse: collapse;
cursor: default;
}
tbody{
overflow-y: scroll;
}
table thead,
tbody tr{
display: table;
width: 100%;
table-layout: fixed;
}
table thead{
width:calc(100% - 1em)
}
table thead th{
background: #84acde;
width: 20%;
}
table tbody td{
width: 20%;
text-align: center;
}
</style>
</head>
<body>
<table  border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出⽣年⽉</th>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>1990-9-9</td>
<td>136********</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>赵新</td>
<td>17</td>
<td>1990-9-9</td>
<td>136********</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>周明</td>
<td>22</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
<tr>
<td>杨洋</td>
<td>19</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
<tr>
<td>刘艳</td>
<td>17</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
<tr>
<td>王福</td>
<td>31</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
<tr>
<td>张贵</td>
<td>32</td>
<td>1990-9-9</td>
<td>吴斌</td>
<td>25</td>
<td>1990-9-9</td>
<td>136********</td>
<td>阿⾥巴巴</td>
</tr>
</tbody>
</table>
</body>
</html>
⽰例⼆
效果如下：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"> <title>ξӗθCSSԌ</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>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>html滚动效果代码
</tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr><tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td>
<td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
<tr>
<td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr>
</tbody>
</table>
</body>
</html>
参考：

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