固定/冻结行表头、列表头的做法

作者:vkvi 来源:ITPOW(原创) 日期:2018-11-17

本文只讲思路和注意事项。本文的固定行表头、列表头要比某些网站的复杂些,因为他们讲的是一个窗口中只有要滚动的表格,而我们是一个窗口中有很多内容,其他内容区域不动,只有表格滚动,同时表格的表头也固定。

固定行表头

固定行表头相对来说要简单得多。

1、将表格放一个 div 中,为这个表格设置高度(如果想做随窗口而变化的自动高度,就用 position:absolute; bottom:xxxpx;……)。为这个表格设置 overflow-y:scroll。现在滚动的表格就出来了。

2、另起一个 table,和上面的 div 平级,table 仅含有表头。利用 CSS 将这个 table 和第 1 步的表格表头重叠。

3、完成了,但是还是有两个缺点,一是第 2 步的表格没有考虑第 1 步的滚动条占用的空间,二是窗口宽度变化时且 table 宽度是用的百分比就需要动态调整宽度,做法如下:

固定行、列表头

这个要复杂些,因为行列表头还要随数据表的滚动条滚动而滚动。

除了固定行表头那种思路外,额外增加两个思路:

1、增加一个左上角的表头,它是固定不动的,也就是行表头和列表头的公共部分。

2、使行表头随数据表横向滚动而滚动,列表头随数据表纵向滚动而滚动,代码如下:

注意

注意单元格宽度、高度应该固定下来,否则容易导致表头和数据表单元格对不上。

相关文章