JavaScript实现两个Table固定表头根据页面大小自行调整
(编辑：jimmy 日期: 2026/4/23 浏览：3 次 )
复制代码 代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script>
/**
* @param oTarget 需要加载scroll的dom对象
* @param fnHandler 处理的回调函数
*/
function eventHandler(oTarget, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener("scroll", fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("onscroll", fnHandler);
} else {
oTarget["onscroll"] = fnHandler;
}
};
function oo(divContentID, divHeaderID) {
var div = document.getElementById(divContentID);
var left = div.scrollLeft;
var divHeader = document.getElementById(divHeaderID);
divHeader.scrollLeft = left;
var disWidth = div.children[0].style.width.replace("px", "")
- div.style.width.replace("px", "");
if (div.scrollLeft >= disWidth) {
divHeader.style.overflowY = 'scroll';
} else {
divHeader.style.overflowY = 'hidden';
}
}
window.onload = function onStartLock() {
var oDiv = document.getElementById("divContentID");
eventHandler(oDiv, function() {
oo("divContentID", "divHeaderID");
});
};
</script>
</head>
<body>
<div id="div1All"
style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px">
<div id="divHeaderID"
style="margin-right: auto; margin-left: auto; overflow: hidden;">
<table border="1" cellspacing="0"
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">
<Tr style="background: navy; color: white; height: 30px">
<Th width="100px">Header A</Th>
<Th width="100px">Header B</Th>
<Th width="100px">Header C</Th>
<Th width="100px">Header D</Th>
<Th width="100px">Header E</Th>
<Th width="100px">Header F</Th>
</Tr>
</table>
</div>
<div id="divContentID"
style="position: absolute; left: 0px; top: 30.5px; bottom: 0px; right: 0px; overflow: scroll">
<table border="1" cellspacing="0"
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
</table>
</div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script>
/**
* @param oTarget 需要加载scroll的dom对象
* @param fnHandler 处理的回调函数
*/
function eventHandler(oTarget, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener("scroll", fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("onscroll", fnHandler);
} else {
oTarget["onscroll"] = fnHandler;
}
};
function oo(divContentID, divHeaderID) {
var div = document.getElementById(divContentID);
var left = div.scrollLeft;
var divHeader = document.getElementById(divHeaderID);
divHeader.scrollLeft = left;
var disWidth = div.children[0].style.width.replace("px", "")
- div.style.width.replace("px", "");
if (div.scrollLeft >= disWidth) {
divHeader.style.overflowY = 'scroll';
} else {
divHeader.style.overflowY = 'hidden';
}
}
window.onload = function onStartLock() {
var oDiv = document.getElementById("divContentID");
eventHandler(oDiv, function() {
oo("divContentID", "divHeaderID");
});
};
</script>
</head>
<body>
<div id="div1All"
style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px">
<div id="divHeaderID"
style="margin-right: auto; margin-left: auto; overflow: hidden;">
<table border="1" cellspacing="0"
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">
<Tr style="background: navy; color: white; height: 30px">
<Th width="100px">Header A</Th>
<Th width="100px">Header B</Th>
<Th width="100px">Header C</Th>
<Th width="100px">Header D</Th>
<Th width="100px">Header E</Th>
<Th width="100px">Header F</Th>
</Tr>
</table>
</div>
<div id="divContentID"
style="position: absolute; left: 0px; top: 30.5px; bottom: 0px; right: 0px; overflow: scroll">
<table border="1" cellspacing="0"
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
</table>
</div>
</div>
</body>
</html>
下一篇：js传中文参数controller里获取参数乱码问题解决方法