该代码来自于 http://www.ntsfjc.com/blog/post/15.html ,代码就不重复贴了,就贴个图吧。
==================================================================
下面是另一个表头固定的例子,经测试在IE7、Chrome和Firefox上都没问题:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Creative Pharmaceutical</title>
<link href="css/common.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
BODY {
font-size: 0.75em;
background-color: #f2f5f0 !important;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
}
TABLE {
/*border: 1px #19197a solid;*/
border: 0px #19197a solid;
border-collapse: collapse;
/* margin-top: -1px; */
}
TABLE TD {
background-color: #ffffff;
border: 1px solid;
color: #000000;
height: 1.8em;
text-align: left;
word-break:break-all;
}
TABLE TH {
background-color: #5279e7;
border: 1px solid;
color: #ffffff;
height: 1.8em;
padding-left: 1em;
text-align: left;
word-break:break-all;
}
TABLE THEAD TH {
padding-left: 1px;
text-align: center;
white-space: wrap;
}
</style>
<script language="javascript">
var ScrollableTable = {
init: false,
_scrollBarWidth : 18,
set: function(id, width, height, overflowX, center) {
if (this.init) {
return;
}
if (overflowX == null) {
overflowX = false;
}
if (center == null) {
center = false;
}
var masterTable = document.getElementById(id);
if (masterTable == null) {
alert("Err \n no table ");
return;
}
if (masterTable.tHead == null) {
alert("err\n no <THEAD>");
return;
}
if (masterTable.caption != null) {
masterTable.caption.innerHTML = "";
}
var thHeight = masterTable.tHead.offsetHeight;
var tableHeader = masterTable.cloneNode(true);
tableHeader.id = tableHeader.id + "_H";
while (tableHeader.tBodies[0].rows.length) {
tableHeader.tBodies[0].deleteRow(0);
}
tableHeader.style.position = "absolute";
tableHeader.style.left = "0";
tableHeader.style.top = "0";
var divHeader = document.createElement("div");
divHeader.id = "D_" + tableHeader.id;
divHeader.style.width = width + "px";
divHeader.style.height = thHeight + "px";
divHeader.style.overflow = "hidden";
divHeader.style.position = "relative";
divHeader.appendChild(tableHeader);
masterTable.parentNode.insertBefore(divHeader, masterTable);
var tableBody = masterTable.cloneNode(true);
tableBody.id = tableBody.id + "_B";
tableBody.deleteTHead();
var divBody = document.createElement("div");
divBody.id = "D_" + tableBody.id;
divBody.style.width = (width + this._scrollBarWidth) + "px";
divBody.style.height = height + "px";
if (overflowX) {
divBody.style.overflow = "scroll";
} else {
divBody.style.overflowY = "scroll";
divBody.style.overflowX = "auto";
}
if (center) {
divBody.style.marginLeft = this._scrollBarWidth + "px";
}
divBody.appendChild(tableBody);
masterTable.parentNode.insertBefore(divBody, masterTable);
masterTable.parentNode.removeChild(masterTable);
divBody.onscroll = function() {
ScrollableTable._onscroll(divHeader.id, divBody.id)
};
this.init = true;
},
_onscroll: function(divHeaderId, divBodyId) {
var divHeader = document.getElementById(divHeaderId);
var divBody = document.getElementById(divBodyId);
divHeader.firstChild.style.left = "-" + divBody.scrollLeft + "px";
}
}
</script>
</head>
<body>
<TABLE id="DataTable" style="width:600px">
<THEAD>
<tr>
<th style="width:100px">Colum01</th>
<th style="width:100px">Colum02</th>
<th style="width:100px">Colum03</th>
<th style="width:100px">Colum04</th>
<th style="width:100px">Colum05</th>
<th style="width:100px">Colum06</th>
</tr>
</THEAD>
<TBODY>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td style="width:100px">QQQQQQQQQQQQQQQQQQQQ</td>
<td style="width:100px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td style="width:100px">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
<td style="width:100px">CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td style="width:100px">DDDDDDDDDDDDDDDDDDDDDDDD</td>
<td style="width:100px">EEEEEEEEEEEEEEEEEEEEE</td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</TBODY>
</TABLE>
<SCRIPT type="text/javascript">
if(document.getElementById("DataTable")){
ScrollableTable.set('DataTable', 600, 500,true);
}
</script>
</body>
</html>