代码一
<!-- * @Descripttion: * @version: * @Author: yang_ft * @Date: 2020-09-29 13:59:26 * @github: famensaodiseng * @LastEditTime: 2020-10-10 17:13:17 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纯css固定表格头部滚动内容</title> <style> .box { width: 1000px; height: 100%; margin: 100px auto; background-color: skyblue; padding: 20px; } table { border-collapse: collapse; background-color: rgba(20, 18, 65, 0.6); text-align: center; border: 1px solid #000; color: #fff; } caption { color: rgb(10, 10, 10); } th { width: 200px; height: 50px; background-color: rgb(39, 55, 153); } td { height: 50px; } tr:nth-child(even) { background: rgba(3, 96, 255, 0.25); } tr:hover { background: #aedaff; } table thead { display: block; width: 100%; background: #ddd; } table tbody { display: block; height: 300px; overflow: auto; } table td, table th { width: 200px; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } table tr { border-bottom: 1px solid #B74; } /* 滚动条样式 content_l 也可以不自定义*/ tbody::-webkit-scrollbar { /*滚动条整体样式*/ width: 2px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } tbody::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #ffffff; } tbody::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: rgba(3, 96, 255, 0.25); } </style> </head> <body> <div class="box"> <table border="1"> <caption> <h3>CSS固定表格头部</h3> </caption> <thead> <tr> <th>测试</th> <th>测试</th> <th>测试</th> <th>测试</th> <th>测试</th> </tr> </thead> <tbody> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> </tbody> </table> </div> </body> </html>
代码二
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>table表格，thead固定，tbody滚动条</title> <style> table { border-collapse: collapse; } table tbody { display: block; height: 195px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 99.99%; /* 如果此处写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>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> <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> <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> <tr> <td>张三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> </tbody> </table> </body> </html>
