2023年6月20日发(作者：)

CSS设置table下tbody的滚动条的实现今天碰到⼀个关于对tabel的表的滚动事件，需求是表头不动，改变的是tbody，如果tbody⾥⾯的内容过多，让其进⾏滚动事件。⾸先想到的就是利⽤css中overflow-y:scroll; 来进⾏内容的滚动，但是在处理tabel的display状态时，就将tabel表的布局给打乱了，如果给tabel的⽗级进⾏限制，则这个表会进⾏滚动。。。在css上设置如下代码就可以了table tbody { display:block; height:200px; overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅

}table tbody::-webkit-scrollbar { display: none; // 隐藏滚动条}table thead, tbody tr { display:table; width:100%; table-layout:fixed;}table thead { width: calc( 100% - 1em )}table thead th{ background:#ccc;}⽰例:table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。

转载⾃·威易⽹CSS教程

姓名 年龄 出⽣年⽉ ⼿机号码 单位
张三 18 1990-9-9 阿⾥巴巴
张三封 18 1990-9-9 阿⾥巴巴与四⼗⼤盗
张⼩三 18 1990-9-9 腾讯科技
张三 18 1990-9-9 浏阳河就业
张三疯⼦ 18 1990-9-9 阿⾥巴巴
张三 18 1990-9-9 阿⾥巴巴
张⼤三 18 1990-9-9 阿⾥巴巴
张三五 18 1990-9-9 阿⾥巴巴
张刘三 18 1990-9-9 阿⾥巴巴
张三 18 1990-9-9 阿⾥巴巴
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

2023年6月20日发(作者：)

CSS设置table下tbody的滚动条的实现今天碰到⼀个关于对tabel的表的滚动事件，需求是表头不动，改变的是tbody，如果tbody⾥⾯的内容过多，让其进⾏滚动事件。⾸先想到的就是利⽤css中overflow-y:scroll; 来进⾏内容的滚动，但是在处理tabel的display状态时，就将tabel表的布局给打乱了，如果给tabel的⽗级进⾏限制，则这个表会进⾏滚动。。。在css上设置如下代码就可以了table tbody { display:block; height:200px; overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅

}table tbody::-webkit-scrollbar { display: none; // 隐藏滚动条}table thead, tbody tr { display:table; width:100%; table-layout:fixed;}table thead { width: calc( 100% - 1em )}table thead th{ background:#ccc;}⽰例:table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。

转载⾃·威易⽹CSS教程

姓名 年龄 出⽣年⽉ ⼿机号码 单位
张三 18 1990-9-9 阿⾥巴巴
张三封 18 1990-9-9 阿⾥巴巴与四⼗⼤盗
张⼩三 18 1990-9-9 腾讯科技
张三 18 1990-9-9 浏阳河就业
张三疯⼦ 18 1990-9-9 阿⾥巴巴
张三 18 1990-9-9 阿⾥巴巴
张⼤三 18 1990-9-9 阿⾥巴巴
张三五 18 1990-9-9 阿⾥巴巴
张刘三 18 1990-9-9 阿⾥巴巴
张三 18 1990-9-9 阿⾥巴巴
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。