表格添加滚动条
1 <style> 2 table { 3 /*设置相邻单元格的边框间的距离*/ 4 border-spacing: 0; 5 /*表格设置合并边框模型*/ 6 border-collapse: collapse; 7 text-align: center; 8 } 9 /*关键设置 tbody出现滚动条*/ 10 table tbody { 11 display: block; 12 height: 80px; 13 overflow-y: scroll; 14 } 15 16 table thead, 17 tbody tr { 18 display: table; 19 width: 100%; 20 table-layout: fixed; 21 } 22 /*关键设置:滚动条默认宽度是16px 将thead的宽度减16px*/ 23 table thead { 24 width: calc( 100% - 1em) 25 } 26 27 28 table thead th { 29 background: #ccc; 30 } 31 32 </style>
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步