table表头固定问题

table表头固定问题

原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟

1. 双table法

表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgroup和col来对齐,或者直接设置th,td的宽度

2. 单table修改样式方法

设置表格体为display:block,表格head和表格body的行都是display:table

.tb tbody{display:block;height:300px;overflow:hidden;overflow-y:scroll;}
.tb thead,.tb tbody tr{
    display:table;width:100%;table-layout:fixed;
}

参考: https://blog.csdn.net/hualele/article/details/52993315
    https://blog.csdn.net/qq_36340642/article/details/79353179

原文地址:https://www.cnblogs.com/mengff/p/9378783.html