使用css锁定表格column的header是Web开发中很经典的一个trick,这个问题在THIN同学的
这篇文章中有较多的讨论。下面的这个实现示例主要是在前人的基础上进行了整合和打磨,可以不太谦虚地说是目前最sexy的表头锁定实现
。当然你一定要甩蛋拍砖,如果是有改进建议的砖头,那是相当的欢迎!。
特别感谢THIN那片文章及相关的讨论,特别感谢 Putee同学给我找到的非常有意义的改进。
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同学给我找到的非常有意义的改进。
本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。