html页面将滚动条设置表格,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教程

table tbody {

display:block;

height:195px;

overflow-y:scroll;

}

table thead, tbody tr {

display:table;

width:100%;

table-layout:fixed;

}

table thead {

width: calc( 100% - 1em )

}

table thead th{ background:#ccc;}

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

张三181990-9-913682299090阿里巴巴张三封181990-9-913682299090阿里巴巴与四十大盗张小三181990-9-913682299090腾讯科技张三181990-9-913682299090浏阳河就业张三疯子181990-9-913682299090阿里巴巴张三181990-9-913682299090阿里巴巴张大三181990-9-913682299090阿里巴巴张三五181990-9-913682299090阿里巴巴张刘三181990-9-913682299090阿里巴巴张三181990-9-913682299090阿里巴巴

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