Table冻结表头 只支持IE

最新推荐文章于 2021-08-14 11:50:22 发布
最新推荐文章于 2021-08-14 11:50:22 发布
阅读量257 收藏
点赞数
原文链接：http://www.cnblogs.com/GodLi/archive/2012/07/03/2574756.html
版权 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<style type="text/css">
td
{
border:solid 1px blue;
background:#fff;
text-align:center;
height:15px;
}
.FixedTitleRow
{
position: relative; 
top: expression(this.offsetParent.scrollTop); 
text-align:center;
border:solid 1px black;
background-color:#ffffff;
z-index=1;
}

.FixedTitleRowTitle
{
position: relative; 
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
top: expression(this.offsetParent.scrollTop); 
border:solid 1px black;
background-color:#ffffff;
text-align:center;
z-index=3;


}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
border:solid 1px black;
text-align:center;
background-color:#ffffff;
z-index=0;
}

.FixedDataRowspanColumn
{
position: relative;
top: expression(this.offsetParent.scrollTop); 
border:solid 1px black;
text-align:center;
background-color:#ffffff;
z-index=2;

}
</style>


</head>
<body scroll="no">
<div id="ctbody" style="width: 500px; overflow: auto; cursor: default; display: inline;
position: absolute; height: 300px;">
<table id="ctTable" style="border-collapse:collapse; width:1700px;">
<tr class="FixedTitleRow">
<td colspan="20" class="FixedDataColumn">表格标题</td>
</tr>
<tr>
<td rowspan="2" class="FixedTitleRowTitle" >项目</td>
<td rowspan="2" class="FixedTitleRowTitle">单位</td>
<td colspan="4" class="FixedTitleRow">表头横向合并1</td>
<td rowspan="2" class="FixedDataRowspanColumn">表头纵向合并1</td>
<td colspan="5" class="FixedTitleRow">表头横向合并2</td>
<td rowspan="2" class="FixedDataRowspanColumn">表头纵向合并2</td>
<td rowspan="2" class="FixedDataRowspanColumn">表头纵向合并3</td>
<td colspan="4" class="FixedTitleRow">表头横向合并3</td>
<td rowspan="2" class="FixedDataRowspanColumn">表头纵向合并4</td>
</tr>
<tr class="FixedTitleRow">
<td class="FixedTitleRow">列1</td>
<td class="FixedTitleRow" >列2</td>
<td class="FixedTitleRow" >列3</td>
<td class="FixedTitleRow" >列4</td>
<td class="FixedTitleRow" >列5</td>
<td class="FixedTitleRow" >列6</td>
<td class="FixedTitleRow" >列7</td>
<td class="FixedTitleRow" >列8</td>
<td class="FixedTitleRow" >列9</td>
<td class="FixedTitleRow" >列10</td>
<td class="FixedTitleRow" >列11</td>
<td class="FixedTitleRow" >列12</td>
<td class="FixedTitleRow" >列13</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目1</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr><tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目2</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目3</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目4</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目5</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr>
</table>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/GodLi/archive/2012/07/03/2574756.html

weixin_30576859
关注
table冻结表头
03-12
一款简单方便的插件，轻松引入，即可调用。有中文注释，便于理解。
jQuery实现冻结表头的方法
10-24
这个方法适用于大多数只需要冻结表头的情况，但并不支持冻结指定列。若要实现更复杂的冻结功能，可能需要扩展这个方法或者使用第三方库，如 `datatables.js` 等，它们提供了更完善的表格管理和冻结功能。 请注意，...
table表头冻结
月夜楓
10-16 2280
本文包含冻结title（thead），以及冻结前X列的实现废话不说，上代码：页面是这样的 出样数据展现 序号 店面编码 店面名称 型号 品类
锁定表头和固定列(Fixed table head and columns)(转载)
ass2112128的博客
12-23 255
前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪念。 支持IE6+，FF3.6+，Opera9+，Chrome9+ 一、实现方式 这里的准备使用4个table实现，具体...
表格 冻结 表头 和 列 代码分享（目前只支持IE）
tianshibaijia
01-09 137
相信 大家都有过 一个表格中有大量的数据，挡在前台或后台显示的时候，过多的数据会把表格显示的很宽 或很长，从而给用户的体验大打折扣， 大家 也可能会想到很多的解决方案解决这一问题。 我的方案就是 能不能把 其 表格的 的表头 或者 列 固定住，从而实现当用户拉动垂直滚动条的时候，表头行固定位置不变动， 当用户拉动水平滚动条时，表头列 不变动。 今天就 分享一个关于html表格冻...
js实现table表头冻结（scroll时固定）
zp19860529的博客
08-14 2699
方案一： 思路：当table在父容器中滑动滚动条显示内容时，使用scrollTop判断边界，同时使用JQuery中的clone方法，把原table创建复制一份，插入到动态创建的一个div中，再将该div的position设置为fixed,height设置table中的thread的高度即可。 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
12-09
【Bootstrap Table 冻结列功能在IE浏览器的兼容性问题及解决方案】 在Web开发中，尤其是在处理大量数据展示时，表格的冻结列功能显得尤为重要。它允许用户在滚动浏览长表格时保持关键列（通常是列头）始终可见，...
单行或多行复杂的固定(冻结)表头的完美解决方案第二版
06-08
同时，考虑到“多行复杂”的描述，这个插件可能还支持多级表头的冻结，这对于展示层次结构复杂的数据非常有用。 在实际应用中，这个插件可能需要与现有的前端框架如jQuery、Vue、React或Angular等配合使用，或者...
jQuery冻结表头、列
02-21
4. **兼容性处理**：考虑到不同的浏览器可能有不同的渲染机制，可能需要对一些CSS属性进行兼容性处理，如`position: fixed`在旧版本的IE中可能不支持，可以使用`position: absolute`和`z-index`作为替代。...
JS冻结表格,锁定表头,固定行列（上下左右4个方向）
11-12
JS冻结窗格（表头锁定）插件，自适应表格单元格宽度，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器），代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结，因为有防止重复冻结功能)，...
div模拟table滚动时表头固定，兼容ie6
04-24
div模拟table滚动时表头固定，兼容ie6；且table自适应，表头的列宽与表体列宽一致，即表头边框与表体边框对齐
table横向纵向表头冻结js代码
04-10
NULL 博文链接：https://yixinhu.iteye.com/blog/1668843
Gridview 固定行与列 冻结表头和列 jquery实现 兼容IE10 谷歌 火狐
11-04
之前上传一个资源css冻结表头冻结第一列，有评论说有些浏览器不兼容，针对这一问题用jquery来解决冻结行和列的兼容问题。 Gridview 固定行与列，jquery实现 兼容IE6-IE10，谷歌，火狐等多种常用版本浏览器。 asp.net程序下载资源可以直接使用
Jquery table固定表头,固定列,全浏览器兼容
11-19
Jquery table固定表头,固定列,全浏览器兼容 Jquery table固定表头,固定列,全浏览器兼容
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
通过table的用来锁定表头，内置封装的JS控制锁定列，在页面中直接调用JS方法设定。
Table冻结表头
在爬行中进步
08-20 3033
Table冻结表头： function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ tab.rows[0].style.zIndex="1"; tab.r
BootstrapTable冻结表头（一）
csdnluolei
01-16 7432
BootstrapTable冻结表头，使用别人写的 JS，这种方法表头置顶后就不会动了。改正一个隐含的bug就是拉动滚定条时表头与数据列不对应。还有一种方法 BootstrapTable冻结表头（二） bootstrap-table-fixed-header的js和css下载  链接：https://pan.baidu.com/s/1d8qB1bldjhLEWQp6jsMBOQ  提取码：r5...
table实现冻结表头
weixin_34167043的博客
03-09 123
https://jsfiddle.net/17khba/5...
CSS实现表头冻结教程：轻松达成冻结效果
注意，此方法可能不适用于所有浏览器，特别是IE系列，因为它们不支持`position: sticky;`。在不兼容的浏览器中，可能需要借助JavaScript库，如ScrollMagic或Perfect Scrollbar等，来模拟这种效果。CSS表头冻结是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值