程序博客网 > 粉笔公考网络课程好吗

基于IE与css的表格行头与多层列头锁定方法

来源：互联网 发布：粉笔公考网络课程好吗 编辑：程序博客网 时间：2024/05/24 01:40

  基于IE与css的表格行头与多层列头锁定方法

 

 

（左边图锁定了行头与列头，右边图仅锁定列头）

有许多的锁定或固定html表格表头的方法和技术，本文介绍的是一个基于IE和css的简易实现方法，基本思路为：使用div行级元素确定一个包含表格的区域，在区域滚动移动时定位非固定单元格的位置（top/left）。

1、确定表格区域

定义一个有边框的div元素，并设置其overfloaw属性为scroll，保证该区域恒有一个垂直与水平滚动条。

div#DivContainer

{

    overflow: scroll; border: solid 1px gray;

}

在div中嵌入一个表格，设置collapse属性为collapse，满足单边框（合并边框）的外观。

 

table

{

    border-collapse: collapse;

}

2、单元格锁定选择器类

需要设计三种类型的锁定单元格：垂直方向锁定单元格（VLocked）、水平方向锁定单元格（HLocked）及双向锁定单元格（Locked），而一般表格内容单元格则设置其位置属性position为relative，见如下css代码：

td

{

    position: relative; padding: 5px; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

}

 

锁定表格行头时，要求行头的单元格水平方不移动，即区域移动时重定位这些行头单元格的left边界值，见如下css代码：

 

td.HLocked /* 水平方向锁住单元格 */

{

z-index: 10; position: relative;

left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

    background-color: #cccccc; text-align: center; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

}

 

td.VLocked /* 垂直方向锁住单元格 */

{

z-index: 20; position: relative;

top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop); font-size: 10pt; color: black; background-color: #cccccc; text-align: center; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

}

 

另一种是锁定行头单元格时，这些是行头又是列头的单元格必须双向锁定，见如下css代码：

 

td.Locked

{

z-index: 30; position: relative;

top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

 font-size: 10pt; color: black; background-color: #cccccc; text-align: center;

 border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

}

 

需要指出，表格td元素的parentNode元素是tr，tr.parentNode元素是tbody，tbody.parentNode元素是table，所以td.parentNode.parentNode.parentNode.parentNode是定制的div元素，即当前表格区域。

锁定表格列头时，需要考虑两种情况单元格。一种是不锁定行头的单元格，此时只需要垂直方向不移动即可，见如下css代码：

还有两点需要说明：

使用了z-index坐标，并且是Locked类选择器的z-index值最大，即最靠近浏览者；

在aspx中使用时，需要删除Visual Studio自动产生的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">行。

下面是完整的css代码和htm演示代码，测试时需要建立一个IIS虚拟路径，拷贝css文件和htm文件到该虚拟路径中，然后通过浏览器浏览htm文件：

view plaincopy to clipboardprint?

div#DivContainer  

{  

    overflow: scroll; border: solid 1px gray;  

}  

table   

{  

    border-collapse: collapse;   

}  

td   

{  

    position: relative; padding: 5px;  

    border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;  

}  

td.Locked /* 水平与垂直方向锁住单元格, 不随鼠标或滚动条移动 */ 

{  

    z-index: 30; position: relative;   

    top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);   

    left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);   

    background-color: #cccccc; text-align: center;   

    border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;  

}  

td.HLocked /* 水平方向锁住单元格 */ 

{  

z-index: 10; position: relative;

left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);   

    background-color: #cccccc; text-align: center;    

    border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;  

}  

td.VLocked /* 垂直方向锁住单元格 */ 

{  

z-index: 20; position: relative;

top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);   

    background-color: #cccccc; text-align: center;   

    border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;  

} 

div#DivContainer

{

         overflow: scroll; border: solid 1px gray;

}

table

{

         border-collapse: collapse;

}

td

{

         position: relative; padding: 5px;

    border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

}

td.Locked /* 水平与垂直方向锁住单元格, 不随鼠标或滚动条移动 */

{

         z-index: 30; position: relative;

    top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

    left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

    background-color: #cccccc; text-align: center;

    border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

}

td.HLocked /* 水平方向锁住单元格 */

{

        

z-index: 10; position: relative;

left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

background-color: #cccccc; text-align: center;

border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

}

td.VLocked /* 垂直方向锁住单元格 */

{

         z-index: 20; position: relative;

top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

    background-color: #cccccc; text-align: center;

    border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

}

 

view plaincopy to clipboardprint?

<html xmlns="http://www.w3.org/1999/xhtml" > 

<head> 

      

    <title>多层表头测试</title> 

<link type="text/css" rel="Stylesheet" href="lockedheaders.css" mce_href="lockedheaders.css" /> 

<mce:style type="text/css"><!--  

    tr { height: 26px; }  

    td         { font-size: 10pt; text-align: right; }  

    td.Locked  { font-size: 10pt; }  

    td.HLocked { font-size: 10pt; }  

    td.VLocked { font-size: 10pt; }  

      

--></mce:style><style type="text/css" mce_bogus="1">    tr { height: 26px; }  

    td         { font-size: 10pt; text-align: right; }  

    td.Locked  { font-size: 10pt; }  

    td.HLocked { font-size: 10pt; }  

    td.VLocked { font-size: 10pt; }  

    </style> 

</head> 

<body> 

<div id="DivContainer" style="width: 400px; height: 260px;"> 

<table id = "Report"> 

  <tr> 

    <td class="Locked" colspan="4">Column1</td> 

      

    <td class="VLocked" rowspan="3">Column5</td> 

    <td class="VLocked" rowspan="3">Column6</td> 

    <td class="VLocked" rowspan="3">Column7</td> 

    <td class="VLocked" rowspan="3">Column8</td> 

  </tr> 

  <tr> 

    <td class="Locked" colspan="2">Column11</td> 

    <td class="Locked" colspan="2">Column12</td> 

  </tr> 

  <tr> 

    <td class="Locked">Column111</td> 

    <td class="Locked">Column112</td> 

    <td class="Locked">Column121</td> 

    <td class="Locked">Column122</td> 

  </tr> 

<!--上面是表列头部分 --> 

  <tr> 

    <td class="HLocked">Row01</td> 

    <td class="HLocked">Row01A</td> 

    <td class="HLocked">Row01B</td> 

    <td class="HLocked">11</td> 

      

    <td style="text-align: center" mce_style="text-align: center">12</td> 

    <td style="text-align: left" mce_style="text-align: left">13</td> 

    <td style="text-align: right" mce_style="text-align: right">14</td> 

    <td>15</td> 

  </tr> 

  <tr> 

    <td class="HLocked">Row02</td> 

    <td class="HLocked">Row02A</td> 

    <td class="HLocked">Row02B</td> 

    <td class="HLocked">21</td> 

    <td>22</td> 

    <td>23</td> 

    <td>24</td> 

    <td>25</td> 

  </tr> 

  <tr> 

    <td class="HLocked">Row03</td> 

    <td class="HLocked">Row03A</td> 

    <td class="HLocked">Row03B</td> 

    <td class="HLocked">31</td> 

    <td>32</td> 

    <td>33</td> 

    <td>34</td> 

    <td>35</td> 

  </tr> 

  <tr> 

    <td class="HLocked">Row04</td> 

    <td class="HLocked">Row04A</td> 

    <td class="HLocked">Row04B</td> 

    <td class="HLocked">41</td> 

    <td>42</td> 

    <td>43</td> 

    <td>44</td> 

    <td>45</td> 

  </tr> 

  <tr> 

    <td class="HLocked">Row05</td> 

    <td class="HLocked">Row05A</td> 

    <td class="HLocked">Row05B</td> 

    <td class="HLocked">51</td> 

    <td>52</td> 

    <td>53</td> 

    <td>54</td> 

    <td>55</td> 

  </tr> 

  <tr> 

    <td class="HLocked">Row06</td> 

    <td class="HLocked">Row06A</td> 

    <td class="HLocked">Row06B</td> 

    <td class="HLocked">61</td> 

    <td>62</td> 

    <td>63</td> 

    <td>64</td> 

    <td>65</td> 

  </tr> 

  <tr> 

    <td class="HLocked">Row07</td> 

    <td class="HLocked">Row07A</td> 

    <td class="HLocked">Row07B</td> 

    <td class="HLocked">71</td> 

    <td>72</td> 

    <td>73</td> 

    <td>74</td> 

    <td>75</td> 

  </tr> 

  <tr> 

    <td class="HLocked">Row08</td> 

    <td class="HLocked">Row08A</td> 

    <td class="HLocked">Row08B</td> 

    <td class="HLocked">81</td> 

    <td>82</td> 

    <td>83</td> 

    <td>84</td> 

    <td>85</td> 

  </tr> 

  <tr> 

    <td class="HLocked">Row09</td> 

    <td class="HLocked">Row09A</td> 

    <td class="HLocked">Row09B</td> 

    <td class="HLocked">91</td> 

    <td>92</td> 

    <td>93</td> 

    <td>94</td> 

    <td>95</td> 

  </tr> 

</table> 

</div> 

</body> 

</html> 

 

 

本文来自CSDN博客，转载请标明出处：

http://blog.csdn.net/hulihui/archive/2009/03/25/4025063.aspx

 

本文来自CSDN博客，转载请标明出处：

http://blog.csdn.net/hulihui/archive/2009/03/25/4025063.aspx

 

粉笔公考网络课程好吗 粉笔公考网络课程好吗
原创粉丝点击
热门IT博客
数据详情分析的工具数据详情分析的工具
武汉软件职业学校武汉软件职业学校
江民青蛙 知乎
精准数据库营销案例
绝地求生知乎
兴业淘宝白金卡精英版
非常网络易中天
淘宝女装代理哪家好
centos 7.3设置中文
用php输出正三角形
智能家居网络协议
淘宝直播小二钉钉群
九城报检软件
mac升级系统卡住
infinite综艺知乎
mac的照片应用是哪个
淘宝在线装修工具
淘宝网今日特价女装
陌陌切图软件
button用js页面跳转
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 无尽对决进不去怎么办 士兵不听命令怎么办 发的面不开怎么办 温度高面发死了怎么办 前妻要去看小孩怎么办 彩票遇上长龙怎么办 lol战区聊天怎么办 本科报名登记表怎么办 军用飞机扰民怎么办 员工不适合岗位怎么办 整容被骗贷款怎么办 浅色衣服染色怎么办 警察盘查怎么办 小孩哭喘不上气怎么办 警察执法打人怎么办? 交警态度差怎么办 澳门迷路怎么办 王文涛走了济南怎么办 换届选举贿选怎么办 民警态度不好怎么办 联通日租卡怎么办香港 东西退港怎么办 在香港买到假表怎么办 香港澳门签证怎么办 香港澳门通行证怎么办 空放怎么办 当海军晕船怎么办 卖膏药怎么办许可证 工作犯错误了怎么办 整治行业风气怎么办 wis洗面奶打不开怎么办 背部痘印怎么办 背部有痘印怎么办 后背油脂多起痘怎么办 背上好多粉刺怎么办 背上全是痘印怎么办 背后全是痘印怎么办 莆田系医院怎么办 宫颈癌术后复发怎么办 宫颈癌早期复发怎么办 小孩脸上湿疹怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里