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

简介:
 使用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数据表格可编辑表格单元格值修改之后获取修改前的值
341 0
|
JavaScript
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
7861 0
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
|
2月前
表格示例
表格示例。
39 12
|
2月前
一个表格示例
一个表格示例。
13 3
|
3月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
37 2
|
人工智能 测试技术
ChatExcel--自动处理表格
ChatExcel--自动处理表格
325 1
ChatExcel--自动处理表格
|
JavaScript BI
el-table 多表格弹窗嵌套数据显示异常错乱问题
## 1、业务背景 使用vue+element开发报表功能时,需要列表上某列的超链接按钮弹窗展示,在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗,以此类推多表格弹窗嵌套,本文以弹窗两次为例 最终效果如下示例页面 ![微信截图_20231110143638.png](https://ucc.alicdn.com/pic/developer-ecology/j2ygdazy447va_6eb0201441bc40a4b5bda9a7e573f0d2.png)
199 0
NoteExpress自定义题录表头显示字段
NoteExpress自定义题录表头显示字段
530 0
NoteExpress自定义题录表头显示字段
|
C#
C# 操作Word文本框——插入表格/读取表格/删除表格
在文本框中,我们可以操作很多元素,如文本、图片、表格等,在本篇文章中将着重介绍如何插入表格到文本框,插入的表格我们可以对表格进行格式化操作来丰富表格内容。此外,对于文本框中的表格内容,我们也可以根据需要来读取表格或者删除表格。
1489 0