<html>
<head>
<style type="text/css" mce_bogus="1">
div.tableContainer {
clear: both;
border: 1px solid #963;
height: expression(document.body.clientHeight*0.3);
overflow: auto;
width: 100%;
}
div.tableContainer table {
float: left;
width: 100%
}
thead.fixedHeader tr {
position: relative;
top: expression(document.getElementById("tableContainer").scrollTop)
}
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: center
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 2px 3px
}
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<thead class="fixedHeader">
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
<th>表头 4</th>
<th>表头 5</th>
<th>表头 6</th>
<th>表头 7</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5</td>
<td>Cell Content 6</td>
<td>Cell Content 7</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 4</td>
<td>More Cell Content 5</td>
<td>More Cell Content 6</td>
<td>More Cell Content 7</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 4</td>
<td>Even More Cell Content 5</td>
<td>Even More Cell Content 6</td>
<td>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>ven More Cell Content 3</td>
<td>Even More Cell Content 4</td>
<td>Even More Cell Content 5</td>
<td>Even More Cell Content 6</td>
<td>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
<tr>
<td nowrap>Even More Cell Content 1</td>
<td nowrap>Even More Cell Content 2</td>
<td nowrap>Even More Cell Content 3</td>
<td nowrap>Even More Cell Content 4</td>
<td nowrap>Even More Cell Content 5</td>
<td nowrap>Even More Cell Content 6</td>
<td nowrap>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
分享到：
相关推荐
固定table表头的插件.zip
当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用jQuery做一个插件，压缩文件中有test.html是一个具体使用的案例，如果不会使用请查看https://blog.csdn.net/qq_28254093/article/details/82844050 文章
实现表头和列固定，并可行多表头，多列(左右都可以)，无错位
html+ table 固定表头和左侧列，可以直接套用在asp.net中，非常方便好用。
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
超好用的jquery插件，可以让表头固定 ，几乎兼容所有浏览器
table的表头固定，用的是一个TABLE
移动端项目，移动端table固定表头与固定第一列,HTML5和css3
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序； 2. 实现当前排序列高亮显示； 3. 实现表格奇偶行不同颜色，即换行变色； 4. 实现表格分页功能，可指定是否开启分页功能及每页行数...
Table 表头固定，当下拉条滚动时,表头一直停留在页面顶部固定不动
移动端项目，移动端table固定表头与固定第一列,HTML5和css3
js table 固定表头
使用演示table元素，使用jquery实现表头及列固定，简单实用。
table 固定指定的列 以及表头 有实现例子
table表格固定表头与固定列的源代码，用css样式来设置，只支持ie系统浏览器
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）
制作的样式中要求table表头固定，内容滚动，同时checkbox右对齐，支持全选
Jquery table固定表头,固定列,全浏览器兼容 Jquery table固定表头,固定列,全浏览器兼容
Fixed Header Table 固定表头 插件