固定表头列头 - 360文档中心

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

16.
{...}{
17.
position: relative;
18.
left: expression(this.parentNode.parentNode.parentNode.parentNode.scro
llLeft);
19.
background-color: #E6ECF0;
20.
}
在你将上面的示例代码准备运用到你的项目中时，请注意如下几点：
.FixedDataColumn {
position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); background-color: #E6ECF0; } </style> </head> <body> <div id="scrollDiv" style="width: 400px; overflow: auto; cursor: default; display: inline; position: absolute; height: 200px;"> <table id='accountTable' width='550' height='230' cellpadding='0' cellspacing='0' border='1' style='table-layout: auto' bordercolor='lightgrey'>
哦！
Html 代码
1. .FixedTitleRow
2.
{...}{
3.
position: relative;
4.
top: expression(this.parentNode.parentNode.parentNode.scrollTop);
5.
z-index: 10;
6.
background-color: #E6ECF0;
//摘自 ITEYE <pre name="code" class="html"><html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>固定表头和列</title> <style>

不要将 div 的宽度或高度设置的比固定列的宽度或高度要小，否则是永远也看不到滚动的内容
的；

固定列只设置前面几列即可，不要设置最后面哦。那样最后的固定列同样也是看不到内容的。
不过没有人会那么变态将固定列设到最后的几列！

你设置了固定列样式 FixedTitleColumn，当然对应的显示数据列也要设置 FixedDataColumn
通过样式表来实现固定表头和列。效果确实不错。但是对于其中的疑问和问题这里需要补充一下。原文中设了三个样式，FixedTitleRow 标题行(TR) 的样式，FixedTitleColumn 标题列(TD)的样式及 FixedDataColumn 数据列(TD)的样式；在这三种样式中都统一设置 position 属性为 relative，这个设置是非常重要的，relative 的解释说明是这样的： Setting the property to relative places the object in the natural HTML flow of the document, but offsets the position of the object based on the preceding content. (设置 HTML 文档中的对象属性为 relative 时，其位移是相对于前面内容对象的) 也就是说那些固定列头的位置(left,top)是在当前所在的位置的基础上偏移的，其偏移量就是在样式中设置的 left 或 top 属性值。例如偏移量是 10，则当前列头的位置则向右偏移 10 个象素，如果是-10，则向左偏移 10 个象素；所以在样式中可以看到下面的代码：
.FixedTitleRow {
position: relative; top: expression(this.offsetParent.scrollTop); z-index: 10; background-color: #E6ECF0; }
.FixedTitleColumn {
position: relative; left: expression(this.parentElement.offsetParent.scrollLeft); }
//这里的 expression 函数是计算 js 表达式的值 top: expression(this.offsetParent.scrollTop); left: expression(this.parentElement.offsetParent.scrollLeft);
其作用就是将当前 TABLE 所属的 DIV 的滚动条的偏移位置(top,left)付给固定列头的 left 或 top 属性，这样当滚动条拖动时，固定列头就不会随之移动啦！这也是样式的 expression 强大之处，它可以在运行时实时计算 left 和 top 值而不需要我们写一句代码。如果真要用 JS 代码来实现此功能，估计没百把行是不可能完成的，并且实现起来也不是那么容易。另外一个感到疑惑的是在样式 expression 表达式中，又是 this.parentElement，又是 this.offsetParent，觉得有点乱。其实都是为了得到 TABLE 所属的 DIV 对象，但我很少用 parentElement 属性，如果想要以 document 层次树更清晰的表达，推荐用 parentNode。所以我对原文中的 expression 改成了如下形式：是不是比以前的表达式清晰？！呵呵，在上面需要注意一点的就是 TR 的 parentNode 是 TBODY，就算你 TABLE 中没有写<TBODY>，它也是隐藏的。所以 TR 追溯到 DIV 需要 3 级，TD 则需要 4 级；
<td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 1111</td> <td class="FixedDataColumn"> This is Test</td> <td class="FixedDataColumn"> 1</td> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td> 001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td class="FixedDataColumn">111</td> <td class="FixedDataColumn">111</td>
<tbody> <tr class="FixedTitleRow"> <td class="FixedTitleColumn"> ID0</td> <td class="FixedTitleColumn"> CK0</td> <td class="FixedTitleColumn">Code0</td> <td class="FixedTitleColumn"> Descirption0</td> <td class="FixedTitleColumn"> TOL0</td> <td>XS0</td> <td >SS0</td> <td>MS0</td> <td>DS0</td> <td>BS0</td> <td>XL0</td> <td>ML0</td> <td>DL0</td> <td>EM0</td> <td>BM0</td> </tr> <tr> <td class="FixedDataColumn">88</td> <td class="FixedDataColumn">88</td> <td class="FixedDataColumn">88</td> <td class="FixedDataColumn">88</td> <td class="FixedDataColumn">88</td> <td>22</td> <td>22</td> <td>22</td> <td>22</td> <td>22</td> <td>22</td> <td>22</td> <td>22</td> <td>22</td> <td>22</td> </tr> <tr>
<td class="FixedDataColumn">111</td> <td class="FixedDataColumn">111</td> <td class="FixedDataColumn">111</td> <td> 001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> <tr> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>010</td> </tr> </tbody> </table> </div> </body> </html> </pre>
7.
}
8.
9.
Байду номын сангаас
.FixedTitleColumn
10.
{...}{
11.
position: relative;
12.
left: expression(this.parentNode.parentNode.parentNode.parentNode.scro
llLeft);
13.
}
14.
15.
.FixedDataColumn