今天研究实现了一个将 table head 固定的效果。

主要思路是在 table 外包裹一个用于滚动的 container,然后设置其滚动样式：

.container {
  xxx
  overflow-x: scroll;
  overflow-y: hidden;
  xxx
}

然后再修改 tbody的滚动样式

.container {
  overflow-y: scroll;
}

最后 td, th 设置最小宽度即可。

完整代码请参考：

See the Pen azOMGz by 宋佳洋 (@songjiayang) on CodePen.