以前自己学习做web项目时，好像涉及到表格内容较多的时候都是每页固定行数，然后分页，不过实际项目中可能在分页的基础上会有“固定表头、滚动内容”这种需求，目前参与的项目中就是这样的，看了这种实现，感觉很不错。
看了看同事写的样式代码，其实很简单，用div套在table外面，设置overflow：auto，然后最主要的就是这个样式
table thead tr {
position: relative;
top: expression(this.parentElement.parentElement.parentElement.scrollTop + 'px');
}
接着我又Google了下找找大侠们的实现，然后才发现上面的样式在firefox下不行，杯具！接着搜…… 最后终于找出了个兼容IE、FF的例子，链接如下：
http://www.stansight.com/sort/LockTableHeadSort.html
对其进行研究，做了如下笔记
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type='text/css'>
/* tbody样式 火狐下主要通过这一个样式来实现滚动 */
.scrollContent {
height: 100px;/* IE FF都可识别 */
overflow-x: hidden; /* IE下无效 */
overflow-y: auto; /* IE下无效 */
}
.scrollContent tr {
height: auto; /* 由于上面设置了 height: 100px; 这里需要设置以保持行高 */
}
/* 这段话是在网上看到的：
因为 CSS2.1 对于在表格类元素上使用 position:relative 没有任何定义：
relative
The box's position is calculated according to the normal flow (this is called the position in normal flow).
Then the box is offset relative to its normal position. When a box B is relatively positioned,
the position of the following box is calculated as though B were not offset.
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group,
table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
所以浏览器之间理解不一样
火狐下无效、IE则可以，所以IE只需要以下一个简单的样式就可以实现表头固定
*/
.fixedHeader tr {
background-color:#00FF00;
position: relative;
/* expression表达式只对IE5以上的浏览器有效，且该表达式会影响效率 */
top: expression(this.parentElement.parentElement.parentElement.scrollTop + 'px');
}
</style>
<!--[if IE]>
<style type="text/css">
/* IE Specific Style addition to constrain table from automatically growing in height */
div.TableContainer {
height: 100px;
overflow-x:hidden;
overflow-y:auto;
}
</style>
<![endif]-->
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div id="TableContainer" class="TableContainer">
<table>
<thead class="fixedHeader">
<tr>
<th>
col1
</th>
<th>
col2
</th>
<th>
col3
</th>
<th>
col4
</th>
<th>
col5
</th>
<th>
col6
</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>
11
</td>
<td>
12
</td>
<td>
13
</td>
<td>
14
</td>
<td>
15
</td>
<td>
16
</td>
</tr>
<tr>
<td>
21
</td>
<td>
22
</td>
<td>
23
</td>
<td>
24
</td>
<td>
25
</td>
<td>
26
</td>
</tr>
<tr>
<td>
31
</td>
<td>
32
</td>
<td>
33
</td>
<td>
34
</td>
<td>
35
</td>
<td>
36
</td>
</tr>
<tr>
<td>
41
</td>
<td>
42
</td>
<td>
43
</td>
<td>
44
</td>
<td>
45
</td>
<td>
46
</td>
</tr>
<tr>
<td>
51
</td>
<td>
52
</td>
<td>
53
</td>
<td>
54
</td>
<td>
55
</td>
<td>
56
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
关于<!--[if IE]>的用法，参照
http://zhanjia.iteye.com/blog/369023
分享到：
相关推荐
"纯CSS固定表头内容滚动表格"是一种高效且用户友好的设计技巧，它允许用户在浏览长表格时始终保持表头可见，从而方便用户理解每一列的数据含义。这种设计方法尤其适用于那些包含大量数据且需要横向滚动查看的表格，...
"GridView固定表头横向滚动纵向固定" GridView是一个基于ASP.NET的数据控件，用于显示数据表格。然而，在默认情况下，GridView的表头无法固定在屏幕上，使得用户体验不佳。为了解决这个问题，本文将介绍如何实现...
### 表格表头固定，内容可以滚动的技术实现 在网页设计中，有时我们需要实现一个功能：当用户滚动表格内容时，表头始终固定显示在顶部，以便于用户查看列名，提高数据阅读效率。本篇文章将围绕这一需求展开讨论，并...
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定...在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
c# gridview 滚动条固定表头 IE已测试 c# gridview 滚动条固定表头 IE已测试 c# gridview 滚动条固定表头 IE已测试
在IT领域，尤其是在网页开发中，"表头固定内容滚动"是一种常见的需求，尤其是在处理大量数据时。这个功能使得用户可以在滚动浏览长表格时，表头始终保持可见，从而更容易跟踪和理解每一列的数据含义。标题"表头固定...
在网页设计中，当表格数据过多时，为了保持良好的用户体验，常常需要实现表头固定而内容可滚动的效果。`jQuery`作为一个广泛使用的JavaScript库，提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何...
1. **HTML结构**：首先，需要设置合理的HTML结构，通常包括一个用于固定表头的thead和一个用于显示数据主体的tbody。同时，可能需要为表格添加额外的类或ID以便于JavaScript操作。 2. **CSS样式**：初步设置表头和...
总结来说，这个学习心得分享了如何利用HTML、CSS和JavaScript来实现ASP.NET中的GridView和DataGrid控件的固定表头滚动数据功能。这种方法的关键在于理解`table-layout:fixed`属性的作用以及如何利用JavaScript动态...
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
### GridView固定表头实现——横向滚动与纵向固定 在网页应用开发中，特别是涉及到大量数据展示的情况下，如何优雅地处理表格中的数据展示成为一个重要的技术挑战。本文将通过一个具体的实例来探讨如何实现在使用...
html表格,固定表头，上下滚动时固定，左右滚动时自动对齐，缩放浏览器时，功能一样完美执行 ! 本人亲手写,亲自测试,功能完美,代码简单易懂! 对需要该功能特效的html表格的亲来说,有很大的帮助哦! 产权所有人:ぶん...
js 实现表头固定 内容滚动
这样，当用户滚动内容时，表头始终保持可见，便于对照数据。本文将深入探讨如何实现Bootstrap表格的这一功能。 首先，要理解Bootstrap表格的基本结构。一个基本的Bootstrap表格由`<table>`标签开启，包含`<thead>`...
为解决这个问题，就需要实现一个固定表头的效果，即无论表格如何滚动，表头始终固定在页面的顶部。 要实现这个效果，有几种常用的方法，主要包括使用CSS定位和JavaScript。而根据提供的文件内容，本文介绍了一种...
Js固定 TBALE 滚动 表头和序号 希望能人能再改进下
制作的样式中要求table表头固定，内容滚动，同时checkbox右对齐，支持全选
开发者需要创建一个自定义的Adapter，该Adapter能够处理两层嵌套的视图：一层是固定的表头（一般是一个HorizontalScrollView），另一层是可滚动的列表内容（ListView）。表头部分通常包含一个LinearLayout或...
表格应该分为两部分：固定表头和可滚动的主体。可以这样编写： ```html 列1 列2 <!-- 更多列... --> 数据1 数据2 <!-- 更多行... --> <!-- 更多行... --> ``` 接下来，我们将使用CSS来...
- **响应式设计**：确保在不同屏幕尺寸和设备上，固定表头依然有效且布局合理。 - **性能优化**：处理大数据量时，避免因JavaScript操作影响页面加载速度。 - **兼容性测试**：在多种浏览器和设备上进行测试，确保...