JavaScript实现两个Table固定表头根据页面大小自行调整
2014-01-03 00:00
956 查看
<%@ 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>
相关文章推荐
- JavaScript实现两个Table固定表头根据页面大小自行调整
- 两个Table固定表头,可根据页面大小自行调整(使用JavaScript)
- 按钮宽度和高度固定,字体大小根据字数自适应用的javascript实现
- 两个table实现固定表头
- 两个table实现固定表头拖动时仅限表体移动
- 用javascript实现gridview的固定表头
- iOS 使用tableview,实现两个页面跳转及使用协议时错误记录
- javascript 实现 html 页面 table 导出 excel
- JavaScript实现同一页面内两个表单互相传值的方法
- htc实现的固定表头table
- table根据表格内的元素改变行颜色的javascript实现
- html固定table表头的实现思路
- iframe根据子页面自动调整大小
- 通过javascript实现页面的横竖屏固定
- iOS开发笔记-根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现
- Javascript弹出页面根据图片来缩放页面大小
- 固定textview大小,根据文字多少调整字体自适应textview大小
- 实现在一个TABLE表中,保持表头不动,固定表头
- JS实现table表格固定表头且表头随横向滚动而滚动
- 主页面中的两个iframe实现鼠标拖动改变其大小