Maison > interface Web > js tutoriel > JavaScript实现两个Table固定表头根据页面大小自行调整_javascript技巧

JavaScript实现两个Table固定表头根据页面大小自行调整_javascript技巧

WBOY
Libérer: 2016-05-16 17:05:28
original
1111 Les gens l'ont consulté
复制代码 代码如下:

pageEncoding="UTF-8"%>




<script> <BR>/** <BR>* @param oTarget 需要加载scroll的dom对象 <BR>* @param fnHandler 处理的回调函数 <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





Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal