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

简介:
 使用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/,如需转载请自行联系原博主。



目录
相关文章
|
6月前
|
存储
编辑怎么去获取表格单个的值
编辑怎么去获取表格单个的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
363 0
|
JavaScript
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
7940 0
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
|
2月前
表格示例
表格示例。
39 12
|
2月前
一个表格示例
一个表格示例。
13 3
|
前端开发
dataTable列内容过长隐藏
dataTable列内容过长隐藏
137 0
|
JavaScript API
快速搞定,查询 + 表格,这种页面
快速搞定,查询 + 表格,这种页面
234 0
NoteExpress自定义题录表头显示字段
NoteExpress自定义题录表头显示字段
538 0
NoteExpress自定义题录表头显示字段
|
存储 前端开发
一个页面单个按钮导出两张Excel表格(表的结构、格式、字段都不一样)
一般来讲,前端页面向浏览器发二进制数据,使浏览器向用户询问是否存储文件有几种常见的方式
180 0
|
C#
C# 操作Word文本框——插入表格/读取表格/删除表格
在文本框中,我们可以操作很多元素,如文本、图片、表格等,在本篇文章中将着重介绍如何插入表格到文本框,插入的表格我们可以对表格进行格式化操作来丰富表格内容。此外,对于文本框中的表格内容,我们也可以根据需要来读取表格或者删除表格。
1490 0