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写法。 

 

 
姓名
 
年龄
 
出生年月
 
手机号码
 
单位
 


 

 
张三
 
18
 
1990-9-9
 
13682299090
 
阿里巴巴
 
 

 
张三封
 
18
 
1990-9-9
 
13682299090
 
阿里巴巴与四十大盗
 
 

 
张小三
 
18
 
1990-9-9
 
13682299090
 
腾讯科技
 
 

 
张三
 
18
 
1990-9-9
 
13682299090
 
浏阳河就业
 
 

 
张三疯子
 
18
 
1990-9-9
 
13682299090
 
阿里巴巴
 
 

 
张三
 
18
 
1990-9-9
 
13682299090
 
阿里巴巴
 
 

 
张大三
 
18
 
1990-9-9
 
13682299090
 
阿里巴巴
 
 

 
张三五
 
18
 
1990-9-9
 
13682299090
 
阿里巴巴
 
 

 
张刘三
 
18
 
1990-9-9
 
13682299090
 
阿里巴巴
 
 

 
张三
 
18
 
1990-9-9
 
13682299090
 
阿里巴巴
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。