本文提供多种实现滚动表格固定表头的方法，包括使用HTML、CSS和JavaScript。这些方法确保在滚动表格内容时，表头始终保持可见，方便用户查看数据。
摘自www
sample1:
<html>
<head>
<style>
body {
background-color: #F0F0F0 ;
font: 11px "verdana","Arial";
width:90%;
margin-left:auto;
margin-right:auto;
}
.tScroll {
border: 1px #7494BF solid;
background-color: #ffffff;
overflow: scroll;
overflow-x:hidden;
height:100px;
cursor: default;
}
tr.tableHead {
position:relative;
background-color:#BFCEE7;
height: 16px;
text-align: center;
}
td {
font: 11px "Verdana", "Arial";
}
td.asBtn{
border: #7494BF solid;
border-width: 0px 1px 1px 0px;
}
table {
border:0px;
width:100%;
}
</style>
</head>
<body>
<div class="tScroll" id="tC">
<table cellspacing="0" cellpadding="0">
<tr class="tableHead" onselectstart="return false" style="top:expression(document.getElementById
('tC').scrollTop)">
<td class="asBtn">heading1</td>
<td class="asBtn">heading2</td><td class="asBtn">heading3</td>
<td class="asBtn">heading4</td><td class="asBtn">heading5</td>
<td class="asBtn">heading6</td>
</tr>
<tr><td>cell1</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
</div>
</body>
</html>
sample2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<table bgcolor="#339900" style="width: 100%">
<tr>
<td style="height: 74px">
<div style="width: 100%; height: 25px; background-color: #ffccff;">
<table cellspacing="0">
<tr>
<td style =" width: 50px;" bgcolor="#ff9966">
c1</td>
<td style =" width: 50px;" bgcolor="#ff9966">
c2
</td>
<td style =" width: 50px;" bgcolor="#ff9966">
c3
</td>
<td style =" width: 50px;" bgcolor="#ff9966">
c4
</td>
<td style =" width:expression((this.parentElement.parentElement.offsetWidth -50-50-50-50)+'px');" bgcolor="#ff9966">
c5
</td>
</tr>
</table>
<div style="width: 100%; height: 133px;overflow-y :scroll ; background-color: #ccff66;">
<table cellspacing="0">
<tr>
<td style =" width: 50px;" >
1</td>
<td style =" width: 50px;" >
12</td>
<td style =" width: 50px;" >
13</td>
<td style =" width: 50px;" >
14</td>
<td style =" width:expression((this.parentElement.parentElement.offsetWidth -50-50-50-50)+'px');" >
15</td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td></td>
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
<td> 6</td>
<td> </td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
<td>8</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 9</td>
<td> </td>
<td> </td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td style="height: 52px;">
</td>
</tr>
</table>
</body>
</html>
sample3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<style type="text/css">
/* 疯子阿飞的样式 */
table.fixtable thead tr{background:#EEE;}
div.thead{overflow:hidden;}
div.tbody{width:200px;height:100px;overflow-y:auto;}
</style>
</head>
<body>
<table width="100%" border="1">
<tr>
<td width=50%>
<!-- 疯子阿飞的HTML -->
<div id=d1 class="tbody">
<table id=t1 class="fixtable">
<thead id=th1>
<tr><td colspan="2">Idddd</td></tr>
<tr><td rowspan="2">Idddd</td><td>Name</td></tr>
<tr><td>Name</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>Mic</td></tr>
<tr><td>2</td><td>Mic</td></tr>
<tr><td>3</td><td>Mic</td></tr>
<tr><td>4</td><td>Mic</td></tr>
<tr><td>5</td><td>Mic</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</body>
<script language="javascript">
var tHeadHeight = document.all["th1"].offsetHeight;
var divTbody=document.all["d1"];
var divThead=document.createElement("<div class='thead'></div>");
//把存放头部的DIV加到存放主体的DIV（最初的DIV）的前面
divTbody.parentNode.insertBefore(divThead, divTbody);
//存放头部的DIV高度为表头高度
divThead.style.height = tHeadHeight;
//存放头部的DIV内容与最初的DIV的内容一样
divThead.innerHTML = divTbody.innerHTML;
//存放主体的表格顶端为负数，让人看不到表头
document.all["t1"][1].style.marginTop = -tHeadHeight;
//存放头部的DIV宽度与最初的DIV宽度一样
divThead.style.width = divTbody.offsetWidth;
</script>
</html>
sample4:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
<!--
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 100%;
}
thead.fixedHeader tr {
position: relative;
top: expression(document.getElementById("tableContainer").scrollTop)
}
-->
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer" style="height: 237px; width: 66%;" >
<table class="scrollTable" style="width: 586px" >
<thead class="fixedHeader" >
<tr>
<th bgcolor="#33cc33">
ID</th>
<th bgcolor="#33cc33">
Name</th>
<th style="width: 91px" bgcolor="#33cc33">
Age</th>
</tr>
</thead>
<tbody class="scrollContent" >
<tr>
<td>
1232</td>
<td>
John</td>
<td style="width: 91px">
10</td>
</tr>
<tr>
<td>
2231</td>
<td>
Bob</td>
<td style="width: 91px;">
20</td>
</tr>
<tr>
<td style="height: 21px">
4222</td>
<td style="height: 21px">
Sam</td>
<td style="width: 91px; height: 21px;">
30</td>
</tr>
<tr>
<td>
4343</td>
<td>
Kobe</td>
<td style="width: 91px">
40</td>
</tr>
<tr>
<td>
4432</td>
<td>
Tank</td>
<td style="width: 91px;">
50</td>
</tr>
<tr>
<td>
7666</td>
<td>
Mark</td>
<td style="width: 91px">
60</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td style="height: 22px">
4688</td>
<td style="height: 22px">
Rock</td>
<td style="width: 91px; height: 22px;">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
<tr>
<td>
4688</td>
<td>
Rock</td>
<td style="width: 91px">
70</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
sample5:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<style type="text/css">
<!--
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0
}
table, td, a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
.td
{
nowrap:'true';
}
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 100%;
}
/* define width of table. IE browsers only */
/* if width is set to 100%, you can remove the width */
/* property from div.tableContainer and have the div scale */
div.tableContainer table {
float: left;
width: 100%
}
/* WinIE 6.x needs to re-account for padding. Give it a negative margin */
\html div.tableContainer table/* */ {
margin: 0 -16px 0 0
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative;
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
}
/* make the TH elements pretty */
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
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
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
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
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%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
<th><a href="#">Header 4</a></th>
<th><a href="#">Header 5</a></th>
<th><a href="#">Header 6</a></th>
<th><a href="#">Header 7</a></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 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>
<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>
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>
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>
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>
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>
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>
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>
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>
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 style="height: 20px">
And Repeat 1</td>
<td style="height: 20px">
And Repeat 2</td>
<td style="height: 20px">
And Repeat 3</td>
<td style="height: 20px">
And Repeat 4</td>
<td style="height: 20px">
And Repeat 5</td>
<td style="height: 20px">
And Repeat 6</td>
<td style="height: 20px">
And Repeat 7</td>
</tr>
<tr>
<td style="height: 20px">
And Repeat 1</td>
<td style="height: 20px">
And Repeat 2</td>
<td style="height: 20px">
And Repeat 3</td>
<td style="height: 20px">
And Repeat 4</td>
<td style="height: 20px">
And Repeat 5</td>
<td style="height: 20px">
And Repeat 6</td>
<td style="height: 20px">
And Repeat 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>
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>
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>
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>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>
扫一扫
9244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
