效果图
html 快速输入
table>h1{溢出滚动效果}+thead>tr>th*8{$$$$} .table>table>tbody>tr*16>td*8{$$$$}css代码
* { margin: 0; padding: 0; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { border-radius: 5px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #d2d2d2; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1); } h1 { text-align: center; padding-bottom: 10px; } body { padding: 20px 200px; } table { width: 100%; border-collapse: collapse; } table thead { background-color: #efefef; } table tbody tr td { text-align: center; } table tbody tr:hover { background-color: #efefef; } .table { height: 280px; width: 100%; overflow: auto; } table th, td { height: 40px; }总结
实现溢出滚动的关键点是用两个table构建表格，否则tbody高度无法调节，即使能调节也会出现tbody宽度不适应的问题