效果图:
html:
<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>13682299090</td><td>阿里巴巴</td></tr><tr><td>张三封</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>阿里巴巴与四十大盗</td></tr><tr><td>张小三</td><td>18</td><td>1990-9-9</td><td>13682299090</td><td>腾讯科技</td></tr></tbody></table>
css:
<style>table tbody {display:block;height:195px;overflow-y:scroll;/*滚动条样式*/&::-webkit-scrollbar {width: 7px; /*height: 4px;*/}&::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}&::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: rgba(0,0,0,0.1);}}table thead, tbody tr {display:table;width:100%;table-layout:fixed;}table thead {width: calc(100% - 1em)}table thead th {background:#ccc;}</style>