Home  >  Article  >  Web Front-end  >  JavaScript implements two Table fixed headers that adjust themselves according to page size_javascript skills

JavaScript implements two Table fixed headers that adjust themselves according to page size_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:05:281092browse
Copy code The code is as follows:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>




<script> <br>/**<br>* @param oTarget The DOM object that needs to be loaded with scroll <br>* @param fnHandler The callback function processed <br>*/ <br>function eventHandler(oTarget, fnHandler) { <br>if (oTarget.addEventListener) { <br>oTarget.addEventListener("scroll", fnHandler, false); <br>} else if (oTarget.attachEvent) { <br>oTarget.attachEvent("onscroll", fnHandler); <br>} else { <br>oTarget["onscroll"] = fnHandler; <br>} <br>}; <br><br>function oo(divContentID, divHeaderID) { <br>var div = document.getElementById(divContentID); <br>var left = div.scrollLeft; <br>var divHeader = document.getElementById(divHeaderID); <br>divHeader.scrollLeft = left; <br><br><br>var disWidth = div.children[0].style.width.replace("px", "") <br>- div.style.width.replace("px", ""); <br>if (div.scrollLeft >= disWidth) { <br>divHeader.style.overflowY = 'scroll'; <br>} else { <br>divHeader.style.overflowY = 'hidden'; <br>} <br>} <br><br>window.onload = function onStartLock() { <br>var oDiv = document.getElementById("divContentID"); <br>eventHandler(oDiv, function() { <br>oo("divContentID", "divHeaderID"); <br>}); <br>}; <br></script>


style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px">
style="margin-right: auto; margin-left: auto; overflow: hidden;">
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">








Header A Header B Header C Header D Header E Header F


style="position: absolute; left: 0px; top: 30.5px; bottom: 0px; right: 0px; overflow: scroll">
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">








































A B C D E F
A B C D E F
A B C D E F
A B C D E F
A B C D E F





Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn