Home

小鱼驿站

01 Dec 2014

how to fix the thead in a table only css

今天研究实现了一个将 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.

Til next time,
small_fish__ at 22:31

scribble