html5 表格纵向滚动条,纯css实现table的表头固定tbody内容显示垂直滚动条

最近在做项目是经常用到table表格来做数据统计，数据少时还好，但是数据多就会导致整个页面看起来乱，用户体验不好，为了使得用户体验更好，所以就会为table的内容上显示滚动条，这样即使再多的数据也不怕因为过多导致页面显示难看。实现的方法有很多，这里列举几个比较好的整理下来，作为一个学习笔记，也为需要的小伙伴提供思路。

首先要明确我们需要完成的效果：

1.固定表头

2.table垂直滚动条

3.table列宽自适应。

第一种css方法

html代码：

姓名年龄单位

刘媛媛20百度

......

css代码：

* {

margin: 0;

padding: 0;

}

table {

/*设置相邻单元格的边框间的距离*/

border-spacing: 0;

/*表格设置合并边框模型*/

border-collapse: collapse;

text-align: center;

}

/*关键设置 tbody出现滚动条*/

table tbody {

display: block;

height: 80px;

overflow-y: scroll;

overflow-x: hidden;

}

table thead,

tbody tr {

display: table;

width: 100%;

table-la