有没有人能够在HTML中实现一个可滚动的表,其中TOP行和LEFT列被冻结,但表的其余部分是否可滚动?一个完美的例子是: Google Squared
我试图对Google平方表的代码进行反向工程,但到目前为止我还没有成功。
注意:我需要能够同时冻结TOP ROW和LEFT COLUMN。
答案 0 :(得分:3)
http://ajaxian.com/archives/freeze-pane-functionality有一个易于复制的工作示例。请务必注意评论 - 许多用户已经为改进脚本提出了有用的建议。
Per @ Nirk的请求,活跃演示的直接链接位于http://www.disconova.com/open_source/files/freezepanes.htm。
答案 1 :(得分:1)
使用这样的基本结构 -
table
row
column (blank)
column
table (1 row high, column headers)
row
column
table (1 column wide, row headers)
column
div (fixed height & width, overflow auto)
table (actual data)
设置固定的表格布局并明确指定列宽(以像素为单位)。你应该能够达到同样的效果。
答案 2 :(得分:0)
我有一个正在使用的版本(用于甘特图表样式显示)。
它使用3个表:1表示左列(行),1表示顶部(列),然后是数据。
你需要努力让细胞与它们匹配的尺寸相匹配(
table layout-fixed
可以帮助实现这一目标。)
然后把这些表放在一些div中;左边和上边的div有(如上所述)高度和高度宽度和{c}中的overflow-auto
。
然后您连接一些javascript以同步左/上div与内部div的滚动...
我记得有一点'诅咒 - 再试一次',但它可以用最小的js来完成。
HTH
答案 3 :(得分:-1)
如果你使用jQuery,那么有很多固定头的表插件。
答案 4 :(得分:-1)
您需要Scrollable(jQuery插件)