<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定表头和列</title>
<style>
.FixedTitleRow
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 10;
background-color: #E6ECF0;
}
.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
}
.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'>
<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">
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">
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">
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">
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>
</tbody>
</table>
</div>
</body>
</html>
通过样式表来实现固定表头和列。效果确实不错。但是对于其中的疑问和问题这里需要补充一下。原文中设了三个样式，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个象素；所以在样式中可以看到下面的代码：
//这里的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级；
.FixedTitleRow
{...}{
position: relative;
top: expression(this.parentNode.parentNode.parentNode.scrollTop);
z-index: 10;
background-color: #E6ECF0;
}
.FixedTitleColumn
{...}{
position: relative;
left: expression(this.parentNode.parentNode.parentNode.parentNode.scrollLeft);
}
.FixedDataColumn
{...}{
position: relative;
left: expression(this.parentNode.parentNode.parentNode.parentNode.scrollLeft);
background-color: #E6ECF0;
}
在你将上面的示例代码准备运用到你的项目中时，请注意如下几点：
- 不要将div的宽度或高度设置的比固定列的宽度或高度要小，否则是永远也看不到滚动的内容的；
- 固定列只设置前面几列即可，不要设置最后面哦。那样最后的固定列同样也是看不到内容的。不过没有人会那么变态将固定列设到最后的几列！
- 你设置了固定列样式FixedTitleColumn，当然对应的显示数据列也要设置FixedDataColumn哦！
分享到：
相关推荐
"h5 固定表头及列头demo"是针对H5网页中的数据展示问题而设计的一个实例，它解决了在滚动时保持表头和列头可见的问题。这种技术在大数据量的表格中尤其有用，因为它能让用户在浏览长表格时始终能看到列名和行名，...
在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...
通常，它会结合HTML、CSS和可能的JavaScript来实现固定表头和列的功能。 五、兼容性和优化 虽然`position: sticky;`在现代浏览器中得到了广泛支持，但老版本的IE浏览器并不支持。为了确保兼容性，可能需要使用...
实现GridView固定表头和列，主要涉及到CSS样式和JavaScript的运用，以及可能的服务器端代码调整。下面我们将详细介绍这个过程： 1. **CSS样式调整**： - 表头固定：通过CSS将GridView的表头（`<thead>`）设置为`...
这个压缩包中的“asp.net html+table固定表头和左侧列”很可能是一个示例项目，包含了必要的HTML、CSS和可能的JavaScript代码，可以直接应用于你的ASP.NET项目中。使用时，只需将这些代码整合到你的页面结构中，调整...
本实例主要关注如何实现GridView的固定表头和列，使得用户在滚动浏览长表格时，表头和部分列始终保持可见，提高用户体验。 GridView冻结表头和列的需求在大数据量展示时尤为重要，因为表头的可见性有助于用户在浏览...
// JavaScript代码，用于实现固定表头效果 ``` 接下来，我们将使用CSS来实现初步的固定表头效果。在`<style>`标签内，我们可以添加以下样式： ```css #fixed-header-table { width: 100%; border-collapse:...
在实际应用中，"golovko-Fixed-Header-Table-aa40378"插件可能提供了更高级的功能，如自定义样式、滚动平滑效果、多列固定等，使得固定表头的实现更加灵活和强大。开发者可以通过解压并查看压缩包中的文件，学习其...
总之，创建一个具有固定表头和列的全浏览器兼容的 jQuery 表格涉及多方面的技术，包括 JavaScript 事件监听、DOM 操作、CSS 定位和兼容性处理。通过合理地组织代码和利用现有的资源，我们可以构建出高性能且用户友好...
通过学习和理解这些代码，你可以更深入地掌握如何利用JavaScript实现固定表头的技巧。在实际应用中，还可以考虑结合现有的库，如jQuery或现代前端框架（如React, Vue, Angular等）中的插件，以简化开发过程并提高...
最后，"Table.js"可能是FixTab的核心代码，实现了固定表头和列的功能。 在实现全浏览器兼容时，开发者需要考虑各种浏览器之间的差异，例如IE8及以上的浏览器可能不支持CSS3的某些特性，如"position: sticky"。这时...
因此，需要确保CSS和JavaScript代码经过充分测试，确保在主流浏览器上正常工作。 总的来说，实现Table表头和列固定是一项技术挑战，但通过合理运用HTML、CSS和JavaScript，以及JSP的动态生成能力，可以创建出用户...
在实现固定表头的场景中，colgroup标签可以用来为表头和表格主体中相对应的列指定统一的宽度。这样，无论表格如何滚动，表头列和表格主体的列宽度都会保持一致。 接下来，我们看下如何通过CSS来定义固定表头的效果...
在处理大数据集时，为了提供更好的用户体验，常常需要实现固定表头的功能，使得用户在滚动浏览内容时，表头始终保持可见，以便于跟踪列对应的数据。本文将深入探讨“固定表头的DataGrid”这一主题，以及如何实现这一...
`fixed表头.html`文件中应该包含类似上述的HTML结构和CSS样式，可能还包含了JavaScript代码以实现更复杂的交互效果。通过查看和学习这个文件，你可以进一步理解如何在实际项目中应用固定表头的技术，提升网页的数据...
在压缩包文件"表格（固定表头、固定列）"中，可能包含了示例代码、HTML文件、CSS样式表和JavaScript脚本，用于演示如何实现这个功能。通过学习和分析这些文件，你可以了解到具体的实现细节，包括如何设置CSS规则，...
总结，BIRT固定表头的实现涉及报表设计和JavaScript编程两方面。通过设置报表元素和编写JQUERY代码，我们可以确保表头在用户滚动时始终保持可见，从而提高报表的可读性和用户体验。虽然提供的代码示例可能在某些...
在IT行业的前端开发中，使用CSS来固定表头或列是一项常见的需求，尤其是在处理大量数据时，这样的设计能显著提升用户体验。本文将深入探讨如何利用CSS实现这一功能，基于提供的HTML代码片段，我们将详细解析其背后的...
对于初学者，可以通过阅读和学习这些代码，了解如何结合`jQuery`和CSS来实现固定表头和表列。同时，为了提高性能和用户体验，还需要关注插件的优化，比如减少DOM操作，避免不必要的重绘和回流，以及合理利用缓存等...
然而，当数据量较大时，用户在滚动页面查看数据的过程中，可能会失去对列头的参考，这时就需要实现GridView的表头固定功能。本文将详细讲解如何仅使用CSS实现GridView固定表头，无需借助JavaScript，从而提高网页...