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

简介:
 使用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同学给我找到的非常有意义的改进。


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。



目录
相关文章
|
9月前
|
存储
编辑怎么去获取表格单个的值
编辑怎么去获取表格单个的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
397 0
|
JavaScript
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
8263 0
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
|
5月前
表格示例
表格示例。
49 12
|
5月前
一个表格示例
一个表格示例。
22 3
|
easyexcel
你要的不固定列excel导入导出,它来啦!(四)
在上篇文章中,我们简单的介绍了 excel 导入导出技术实践方案,就目前而已,使用最多的开源框架主要有以下三类,分别是:
|
人工智能 测试技术
ChatExcel--自动处理表格
ChatExcel--自动处理表格
363 1
ChatExcel--自动处理表格
|
easyexcel
你要的不固定列excel导入导出,它来啦!(三)
在上篇文章中,我们简单的介绍了 excel 导入导出技术实践方案,就目前而已,使用最多的开源框架主要有以下三类,分别是:
你要的不固定列excel导入导出,它来啦!(三)
C#编程学习21:修改excel的数据项
C#编程学习21:修改excel的数据项
C#编程学习21:修改excel的数据项
NoteExpress自定义题录表头显示字段
NoteExpress自定义题录表头显示字段
597 0
NoteExpress自定义题录表头显示字段