table表头固定问题

table表头固定问题

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

1. 双table法

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

2. 单table修改样式方法

设置表格体为display:block&＃xff0c;表格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