一个兼容IE、Chrome跟Firfox的HTML固定表头例子-HTML教程-爱易网页

一个兼容IE、Chrome跟Firfox的HTML固定表头例子

日期：2014-05-17　浏览次数：20907 次

一个兼容IE、Chrome和Firfox的HTML固定表头例子

该代码来自于 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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

一个兼容IE、Chrome跟Firfox的HTML固定表头例子

相关资料更多>

推荐阅读更多>