table如何固定表头和列

Question

需要实现同时固定表头和列，已经试过的方法有

• 使用三个表，滚动其中一个表时，通过js滚动其他两个表

缺点： 手机端会有严重的不同步现象，有时还会出现错位

• 使用sticky来实现

缺点： ios会有严重的卡顿现象，虽然可以使用-webkit-overflow-scrolling: touch;解决卡顿，但有引起了其他的问题：手指在滑动离开屏幕时，sticky元素消失了，滚动停止时又出现

有没有解决以上问题的方法？

兼容性要求不高，chrome65+，移动端即可

Answer 1

我以前用过一个方案，两个 <table>，A 只有表头，position:fixed，B 里是完整的内容。渲染完成后，复制 B 的表头各单元格宽度到 A。