本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01table表格横向的滚动条-讲解table滚动条事件

纯CSS报表和固定不动的tbody翻转实际效果。

因为新项目的必须，当报表中的信息量提升时，会发生下拉列表。翻转全过程中，表头默认设置会随报表內容一起翻转，造成表头相匹配的列名看不见，危害感受实际效果！

执行构思:

在tbody标识中加上overflow-y: auto来操纵要翻转內容的地区；款式，加上报表合理布局:固定不动到tr标签；(这也是关键)设计风格，由于tbody拥有下拉列表后，下拉列表会占有室内空间，造成tbody和thead不重叠，因此在设定tbody的总宽时，也需要再加上下拉列表的总宽【假如不愿表明下拉列表，能够设定下拉列表的间距为0px，下拉列表就没有了。

下边是3D渲染，实际详细的例子编码也在下面:

详细的案例编码: 纯CSS table报表 thead固定不动 tbody翻转 .table-box { margin: 100px auto; width: 1024px; } /* 滚动条宽度 */ ::-webkit-scrollbar { width: 8px; background-color: transparent; } /* 下拉列表色调 */ ::-webkit-scrollbar-thumb { background-color: #27314d; } table { width: 100%; border-spacing: 0px; border-collapse: collapse; } table caption{ font-weight: bold; font-size: 24px; line-height: 50px; } table th, table td { height: 50px; text-align: center; border: 1px solid gray; } table thead { color: white; background-color: #38F; } table tbody { display: block; width: calc(100% 8px); /*这儿的8px是下拉列表的总宽*/ height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; } table tfoot { background-color: #71ea71; } table thead tr, table tbody tr, table tfoot tr { box-sizing: border-box; table-layout: fixed; display: table; width: 100%; } table tbody tr:nth-of-type(odd) { background: #EEE; } table tbody tr:nth-of-type(even) { background: #FFF; } table tbody tr td{ border-bottom: none; } 纯CSS table报表 thead固定不动 tbody翻转 序 号 姓 名 年 龄 性 别 手 机 001 Name 28 女 Mobile 002 Name 28 男 Mobile 003 Name 28 女 Mobile 004 Name 28 男 Mobile 005 Name 28 女 Mobile 006 Name 28 男 Mobile 007 Name 28 女 Mobile 008 Name 28 男 Mobile 【table，thead，tbody，tfoot】 colspan：合拼行， rowspan：合拼列