滚动条滚动到最后一列，2个层能对齐是关键, 原理：利用动态显示scrollbar 来对齐。
<html>
<head>
<title></title>
<script>
var EventUtil = new Object;
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var oo = function(){
var div = document.getElementById("divContent");
var left = div.scrollLeft;
var divHeader = document.getElementById("divHeader");
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() {
var oDiv = document.getElementById("divContent");
EventUtil.addEventHandler(oDiv, "scroll", oo);
}
</script>
</head>
<body >
<br>
<div id="div1All" style="margin-right: auto;margin-left: auto;overflow:auto; ">
<div id="divHeader" style="margin-right: auto;margin-left: auto;overflow-y:hidden;overflow-x:hidden;width:600;">
<table border=1 cellspacing=0 style="margin-top:-2px;width:800">
<TR style="background:navy;color:white;width:800;height:30;" id="idTr">
<TD nowrap width=20%>Header A</TD>
<TD nowrap width=20%>Header B</TD>
<TD nowrap width=20%>Header C</TD>
</TR>
</table>
</div>
<div id="divContent" style="margin-right: auto;margin-left: auto;height:300;overflow:auto;width:600; ">
<table border=1 cellspacing=0 style="margin-top:-2px;width:800;" height=500>
<TR>
<TD width=20%>A</TD>
<TD width=20%>B</TD>
<TD nowrap width=20% >CCC</TD>
</TR>
<TR>
<TD>AAAAAAA</TD>
<TD>BBBBBBB</TD>
<TD>CCCCCCCC</TD>
</TR>
<TR>
<TD>AAAAAAA</TD>
<TD>BBBBBBB</TD>
<TD>CCCCCCCC</TD>
</TR>
<TR>
<TD>AAAAAAA</TD>
<TD>BBBBBBB</TD>
<TD>CCCCCCCC</TD>
</TR>
<TR>
<TD>AAAAAAA</TD>
<TD>BBBBBBB</TD>
<TD>CCCCCCCC</TD>
</TR>
</table>
</div>
</div>
</body>
</html>
分享到：
相关推荐
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
在这种情况下，第一行div用于正常显示表头，而第二行div则在滚动时复制并固定表头。当页面滚动时，通过比较表格与视口的位置关系，动态调整第二行div的显示或隐藏。这种方法增加了代码复杂度，但可以提供更好的视觉...
在这种情况下，如何实现一个既高效又能良好展示上万条数据的表格，并且还要保证在IE和Firefox等浏览器中的兼容性，就显得尤为重要。 首先，我们需要理解“支持上万条数据的table实现”这一概念。这通常涉及到虚拟...
- IE浏览器对 `tr` 和 `td` 的 `position: relative` 支持良好，但在其他现代浏览器（如Firefox 4和Chrome）中可能无效，因为这些浏览器遵循最新的CSS规范。 3. **动态更新位置：** - 通过JavaScript动态更新 `tr...
该插件支持多种浏览器，包括IE8+，以及现代的Chrome、Firefox、Safari和Edge等。1.1.2版本在前一版本的基础上进行了优化，提升了兼容性和用户体验。 ### 二、安装与引入 首先，你需要从官方仓库或第三方资源站点...
// 新的预览代码，支持IE6、IE7,IE8也支持，firefox不支持！ var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile...
- 示例中提到了IE和火狐（Firefox）浏览器，这意味着代码在编写时需要考虑到不同浏览器对XMLHttpRequest对象的实现可能不同，因此需要进行相应的适配。 具体实现步骤如下： - 定义一个函数loadXMLDoc，它负责读取...
=== SortTableTool.js 实现table行排序. === 源码中有详细说明.sort_table.html 为示例html. 1.支持的排序数据类型有 Number,String,Date,NoCaseString 2.默认开始为升序,可指定为...4.IE8 ,Firefox/3.6.24 下测试通过
本文将详细介绍如何使用JavaScript来实现在Web页面上动态增加和删除表格行的功能，并确保该功能在Internet Explorer (IE) 和 Firefox (FF) 等浏览器中能够正常运行。此技术对于构建具有高度交互性和响应性的用户界面...
我们在前面第一章讲到XML是将数据和格式分离的。XML文档本身不知道如何来显示，必须有辅助文件来帮助实现。(XML取消了所有标识，包括font,color,p等风格样式定义标识，因此XML全部是采用类似DHTML中CSS的方法来定义...
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
fixedNumber: 1 // 如果需要第一列固定，将数字1替换为需要固定的列数 }); ``` 6. **更新或修复插件**：有时，问题可能出在Bootstrap表格插件本身。确保使用的是最新版本，或者查找已知的bug和修复。 7. **清除...
1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，...
目前这个tree table可以在firefox和IE6.0+上运行 看网上有几种tree table的实现，都是先把表格或数据填好，然后再对表格进行处理，但是很少有需求是这样，实际应用中，数据可能就是JSON对象，这个JSON对象有自己的...
1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，...
/* Firefox */ } .scroll-area::-webkit-scrollbar { width: 10px; } .scroll-area::-webkit-scrollbar-track { background: #f1f1f1; } .scroll-area::-webkit-scrollbar-thumb { background: #888; }...
在Firefox等其他浏览器中，`innerHTML`通常可以正常工作，但在IE的兼容模式下，尝试更改`table`、`thead`、`tfoot`、`tbody`、`tr`、`col`、`colgroup`、`html`、`title`、`style`、`frameset`等元素的`innerHTML`时...
- **兼容性**: 兼容主流浏览器，如Chrome、Firefox、Safari和IE。 - **灵活性**: 支持选择打印特定表格部分，或者排除不需打印的元素。 - **易用性**: 用户无需额外设置，只需点击打印按钮即可。 ### 6. 示例代码 ...
标题提到的问题主要聚焦在IE8和Chrome浏览器上，这两种浏览器在处理`table-layout: fixed`和`width: 100%`的CSS属性时，与IE7和Firefox的表现有所不同。 `table-layout: fixed`这个CSS属性用于设定表格的布局算法，...
描述中提到“修改了第一版中的一些bug”，意味着这个解决方案已经经过了迭代优化，能够更好地兼容各种浏览器，包括IE5到IE11以及FireFox和Chrome，这涵盖了大部分用户的常用浏览器。 "FreezingGridPlugin.js"这个...