绝对的单表格支持横纵表头锁定示例

使用css锁定表格column的header是Web开发中很经典的一个trick，这个问题在THIN同学的这篇文章中有较多的讨论。下面的这个实现示例主要是在前人的基础上进行了整合和打磨，可以不太谦虚地说是目前最sexy的表头锁定实现

。当然你一定要甩蛋拍砖，如果是有改进建议的砖头，那是相当的欢迎!。

Column (0, 0)

Column (1, 0)

Column (2, 0)

Column (3, 0)

Column (4, 0)

Column (5, 0)

Column (6, 0)

Column (7, 0)

Column (8, 0)

Column (9, 0)

Column (10, 0)

Column (11, 0)

Column (12, 0)

Column (13, 0)

Column (0, 1)

Column (1, 1)

Column (2, 1)

Column (3, 1)

Column (4, 1)

Column (5, 1)

Column (6, 1)

Column (7, 1)

Column (8, 1)

Column (9, 1)

Column (10, 1)

Column (11, 1)

Column (12, 1)

Column (13, 1)

Column (0, 2)

Column (1, 2)

Column (2, 2)

Column (3, 2)

Column (4, 2)

Column (5, 2)

Column (6, 2)

Column (7, 2)

Column (8, 2)

Column (9, 2)

Column (10, 2)

Column (11, 2)

Column (12, 2)

Column (13, 2)

Row (0, 0)

Data (0, 0)

Data (1, 0)

Data (2, 0)

Data (3, 0)

Data (4, 0)

Data (5, 0)

Data (6, 0)

Data (7, 0)

Data (8, 0)

Data (9, 0)

Data (10, 0)

Data (11, 0)

Data (12, 0)

Data (13, 0)

Row (0, 1)

Data (0, 1)

Data (1, 1)

Data (2, 1)

Data (3, 1)

Data (4, 1)

Data (5, 1)

Data (6, 1)

Data (7, 1)

Data (8, 1)

Data (9, 1)

Data (10, 1)

Data (11, 1)

Data (12, 1)

Data (13, 1)

Row (0, 2)

Data (0, 2)

Data (1, 2)

Data (2, 2)

Data (3, 2)

Data (4, 2)

Data (5, 2)

Data (6, 2)

Data (7, 2)

Data (8, 2)

Data (9, 2)

Data (10, 2)

Data (11, 2)

Data (12, 2)

Data (13, 2)

Row (0, 3)

Data (0, 3)

Data (1, 3)

Data (2, 3)

Data (3, 3)

Data (4, 3)

Data (5, 3)

Data (6, 3)

Data (7, 3)

Data (8, 3)

Data (9, 3)

Data (10, 3)

Data (11, 3)

Data (12, 3)

Data (13, 3)

Row (0, 4)

Data (0, 4)

Data (1, 4)

Data (2, 4)

Data (3, 4)

Data (4, 4)

Data (5, 4)

Data (6, 4)

Data (7, 4)

Data (8, 4)

Data (9, 4)

Data (10, 4)

Data (11, 4)

Data (12, 4)

Data (13, 4)

Row (0, 5)

Data (0, 5)

Data (1, 5)

Data (2, 5)

Data (3, 5)

Data (4, 5)

Data (5, 5)

Data (6, 5)

Data (7, 5)

Data (8, 5)

Data (9, 5)

Data (10, 5)

Data (11, 5)

Data (12, 5)

Data (13, 5)

Row (0, 6)

Data (0, 6)

Data (1, 6)

Data (2, 6)

Data (3, 6)

Data (4, 6)

Data (5, 6)

Data (6, 6)

Data (7, 6)

Data (8, 6)

Data (9, 6)

Data (10, 6)

Data (11, 6)

Data (12, 6)

Data (13, 6)

Row (0, 7)

Data (0, 7)

Data (1, 7)

Data (2, 7)

Data (3, 7)

Data (4, 7)

Data (5, 7)

Data (6, 7)

Data (7, 7)

Data (8, 7)

Data (9, 7)

Data (10, 7)

Data (11, 7)

Data (12, 7)

Data (13, 7)

Row (0, 8)

Data (0, 8)

Data (1, 8)

Data (2, 8)

Data (3, 8)

Data (4, 8)

Data (5, 8)

Data (6, 8)

Data (7, 8)

Data (8, 8)

Data (9, 8)

Data (10, 8)

Data (11, 8)

Data (12, 8)

Data (13, 8)

Row (0, 9)

Data (0, 9)

Data (1, 9)

Data (2, 9)

Data (3, 9)

Data (4, 9)

Data (5, 9)

Data (6, 9)

Data (7, 9)

Data (8, 9)

Data (9, 9)

Data (10, 9)

Data (11, 9)

Data (12, 9)

Data (13, 9)

Row (0, 10)

Data (0, 10)

Data (1, 10)

Data (2, 10)

Data (3, 10)

Data (4, 10)

Data (5, 10)

Data (6, 10)

Data (7, 10)

Data (8, 10)

Data (9, 10)

Data (10, 10)

Data (11, 10)

Data (12, 10)

Data (13, 10)

Row (0, 11)

Data (0, 11)

Data (1, 11)

Data (2, 11)

Data (3, 11)

Data (4, 11)

Data (5, 11)

Data (6, 11)

Data (7, 11)

Data (8, 11)

Data (9, 11)

Data (10, 11)

Data (11, 11)

Data (12, 11)

Data (13, 11)

Row (0, 12)

Data (0, 12)

Data (1, 12)

Data (2, 12)

Data (3, 12)

Data (4, 12)

Data (5, 12)

Data (6, 12)

Data (7, 12)

Data (8, 12)

Data (9, 12)

Data (10, 12)

Data (11, 12)

Data (12, 12)

Data (13, 12)

Row (0, 13)

Data (0, 13)

Data (1, 13)

Data (2, 13)

Data (3, 13)

Data (4, 13)

Data (5, 13)

Data (6, 13)

Data (7, 13)

Data (8, 13)

Data (9, 13)

Data (10, 13)

Data (11, 13)

Data (12, 13)

Data (13, 13)

Row (0, 14)

Data (0, 14)

Data (1, 14)

Data (2, 14)

Data (3, 14)

Data (4, 14)

Data (5, 14)

Data (6, 14)

Data (7, 14)

Data (8, 14)

Data (9, 14)

Data (10, 14)

Data (11, 14)

Data (12, 14)

Data (13, 14)

Row (0, 15)

Data (0, 15)

Data (1, 15)

Data (2, 15)

Data (3, 15)

Data (4, 15)

Data (5, 15)

Data (6, 15)

Data (7, 15)

Data (8, 15)

Data (9, 15)

Data (10, 15)

Data (11, 15)

Data (12, 15)

Data (13, 15)

Row (0, 16)

Data (0, 16)

Data (1, 16)

Data (2, 16)

Data (3, 16)

Data (4, 16)

Data (5, 16)

Data (6, 16)

Data (7, 16)

Data (8, 16)

Data (9, 16)

Data (10, 16)

Data (11, 16)

Data (12, 16)

Data (13, 16)

Row (0, 17)

Data (0, 17)

Data (1, 17)

Data (2, 17)

Data (3, 17)

Data (4, 17)

Data (5, 17)

Data (6, 17)

Data (7, 17)

Data (8, 17)

Data (9, 17)

Data (10, 17)

Data (11, 17)

Data (12, 17)

Data (13, 17)

Row (0, 18)

Data (0, 18)

Data (1, 18)

Data (2, 18)

Data (3, 18)

Data (4, 18)

Data (5, 18)

Data (6, 18)

Data (7, 18)

Data (8, 18)

Data (9, 18)

Data (10, 18)

Data (11, 18)

Data (12, 18)

Data (13, 18)

Row (0, 19)

Data (0, 19)

Data (1, 19)

Data (2, 19)

Data (3, 19)

Data (4, 19)

Data (5, 19)

Data (6, 19)

Data (7, 19)

Data (8, 19)

Data (9, 19)

Data (10, 19)

Data (11, 19)

Data (12, 19)

Data (13, 19)

Row (0, 20)

Data (0, 20)

Data (1, 20)

Data (2, 20)

Data (3, 20)

Data (4, 20)

Data (5, 20)

Data (6, 20)

Data (7, 20)

Data (8, 20)

Data (9, 20)

Data (10, 20)

Data (11, 20)

Data (12, 20)

Data (13, 20)

Row (0, 21)

Data (0, 21)

Data (1, 21)

Data (2, 21)

Data (3, 21)

Data (4, 21)

Data (5, 21)

Data (6, 21)

Data (7, 21)

Data (8, 21)

Data (9, 21)

Data (10, 21)

Data (11, 21)

Data (12, 21)

Data (13, 21)

Row (0, 22)

Data (0, 22)

Data (1, 22)

Data (2, 22)

Data (3, 22)

Data (4, 22)

Data (5, 22)

Data (6, 22)

Data (7, 22)

Data (8, 22)

Data (9, 22)

Data (10, 22)

Data (11, 22)

Data (12, 22)

Data (13, 22)

Row (0, 23)

Data (0, 23)

Data (1, 23)

Data (2, 23)

Data (3, 23)

Data (4, 23)

Data (5, 23)

Data (6, 23)

Data (7, 23)

Data (8, 23)

Data (9, 23)

Data (10, 23)

Data (11, 23)

Data (12, 23)

Data (13, 23)

Row (0, 24)

Data (0, 24)

Data (1, 24)

Data (2, 24)

Data (3, 24)

Data (4, 24)

Data (5, 24)

Data (6, 24)

Data (7, 24)

Data (8, 24)

Data (9, 24)

Data (10, 24)

Data (11, 24)

Data (12, 24)

Data (13, 24)

Row (0, 25)

Data (0, 25)

Data (1, 25)

Data (2, 25)

Data (3, 25)

Data (4, 25)

Data (5, 25)

Data (6, 25)

Data (7, 25)

Data (8, 25)

Data (9, 25)

Data (10, 25)

Data (11, 25)

Data (12, 25)

Data (13, 25)

Row (0, 26)

Data (0, 26)

Data (1, 26)

Data (2, 26)

Data (3, 26)

Data (4, 26)

Data (5, 26)

Data (6, 26)

Data (7, 26)

Data (8, 26)

Data (9, 26)

Data (10, 26)

Data (11, 26)

Data (12, 26)

Data (13, 26)

特别感谢THIN那片文章及相关的讨论，特别感谢Putee同学给我找到的非常有意义的改进。

祝大家五·一快乐，等五·一回来后我再说说里面的细节并发布成WebControl。

posted on 2006-05-01 14:10 birdshome 阅读(8357) 评论(20) 编辑收藏网摘所属分类: Jscript&Dhtml开发

#3楼  回复 引用 查看

FireFox下不能用阿……

2006-05-02 11:38 | Dflying Chen

#4楼  回复 引用

不知道做IE设计的人是否想到过，原来TABLE还可以这样玩啊？

2006-05-07 16:39 | ycheng[未注册用户]

#5楼  回复 引用 查看

强，只是例子垃圾太多了，应该做个简化版的，更易阅读

2006-05-11 20:13 | 发仔

#6楼  回复 引用

强，可惜opera和firefox均不支持css的expression（firefox也许稍微支持一下），如果要做成控件，恐怕还有很长的路要走。谢谢！

2006-05-12 10:47 | cmbscqhd[未注册用户]

#7楼  回复 引用

在研究了这个锁定表头的实例后，结合以前所做，我有一个强烈的感觉：为了实现通浏览器、为了能控制到单元格数据本身（引用td，并不代表引用了其中的数据）、为了能够实现合计、加减运算等、为了能够自动去除空白行、空白列等等功能，似乎使用div嵌套要比使用table方便得多，请各位大侠提出意见、想法！

2006-05-12 10:58 | cmbscqhd[未注册用户]

#8楼 [楼主] 回复 引用 查看

@发仔
这个只是展示效果的例子，细节和原理还在整理中。

@cmbscqhd
我觉得用Table挺好的，如果用div嵌套，先不说复杂度，可能效率上也吃不消。我上面这个示例是40x50都是2000个cells了，如果用div比较恐怖。。。

2006-05-12 14:57 | birdshome

1、要做成一个通用的、较丰富功能的grid，用table恐怕不行，table在定位、列宽控制、数据控制等方面都存在较多问题，特别是在锁定行列、列宽控制、数据运算、数据排序等方面。
2、上述实例中表格左上角的三个单元格并没有实现合并，因为一旦用rowspan=3合并后，就不能实现锁定功能了，这说明上述实例可能不太符合中国式表格习惯。
3、<a href="www.activewidgets.com">activeWidgets</a>框架中grid的实现就使用了div，而不是table。二者的区别仅是div比td多用了一个字母而已。