css 和表头对齐 表格_CSS设置table下tbody滚动条与thead对齐的方法

客户有个需求，table的表头不动，但是表格内容需要限定高度加上滚动条，如果直接在tbody加上高度和overflow-y:scroll，thead的表头就对不齐。下面就是解决这个问题的方法：

效果如下：

威易网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阿里巴巴