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

    使用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  阅读(17955)  评论(20编辑  收藏  举报

导航