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

作者:vkvi 来源:千一网络(原创) 日期: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、使行表头随数据表横向滚动而滚动,列表头随数据表纵向滚动而滚动,代码如下:

注意

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

你前面那位网友看了:到底要不要用伪随机数?

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
标题:必填
内容:
本站永远终止与捏造“罪名”不支付广告费的某度联盟合作。
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,10 年间共计撰写文章 4000 余篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他