固定表格行列(expression)

最新推荐文章于 2021-06-03 20:09:35 发布
转载 最新推荐文章于 2021-06-03 20:09:35 发布 · 79 阅读 · 0

本文提供了一个HTML表格中实现固定行列的示例代码，通过使用特定的CSS样式确保了即使在滚动时某些列和行也能保持可见。此方法适用于数据量较小的情况。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style>

.FixedTitleRow
{
   position: relative;
   top: expression(this.offsetParent.scrollTop);
   z-index: 10;
   width: 80px;
   background-color: #FFCC00;
}
 .FixedDataColumn
 { position: relative;
   left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
   background-color: #E6ECF0;
 }
 .FixedColumnAndRows{
   position: relative;
   top: expression(this.offsetParent.scrollTop);
   left: expression(this.offsetParent.scrollLeft);
   z-index: 20;
   width: 80px;
   background-color: #FFCC00;
 }
 td{word-break : keep-all;}

</style>
</head>

<body>
<div id="scrollDiv" style="width:500; height:150; overflow: auto; cursor: default; display: inline; position: absolute;">
<table width="100%"  cellpadding='0' cellspacing='0' bordercolor='lightgrey' border="1" style="table-layout:fixed">    
    <tr bgcolor="#FFCC00" style="font-size:12px; text-align:center; font-weight:bold;height:25px;">        
         <td class="FixedColumnAndRows">header</td>        
         <td class="FixedColumnAndRows">header</td>        
         <td class="FixedColumnAndRows">header</td>        
         <td class="FixedTitleRow">header</td>        
         <td class="FixedTitleRow">header</td>        
         <td class="FixedTitleRow">header</td>
   <td class="FixedTitleRow">header</td>        
         <td class="FixedTitleRow">header</td>        
         <td class="FixedTitleRow">header</td>        
         <td class="FixedTitleRow">header</td>        
         <td class="FixedTitleRow">header</td>        
         <td class="FixedTitleRow">header</td>        
    </tr>           
    <tr style="font-size:12px; text-align:center;height:20px;">        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
    </tr>   
    <tr style="font-size:12px; text-align:center;height:20px;">        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
    </tr> 
 <tr style="font-size:12px; text-align:center;height:20px;">        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
    </tr> 
 <tr style="font-size:12px; text-align:center;height:20px;">        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
    </tr>
 <tr style="font-size:12px; text-align:center;height:20px;">        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
    </tr>
 <tr style="font-size:12px; text-align:center;height:20px;">        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
    </tr>
 <tr style="font-size:12px; text-align:center;height:20px;">        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td class="FixedDataColumn">left</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
         <td>--</td>        
    </tr>
  </table>
</body>
</html>

/* 这种固定行列的方式只适用于IE,并且只适用于数据量较少的情况.数据量很多时是非常耗资源的!*/

from: http://mirror-100.blog.163.com/blog/static/105633532008761743297/

通过样式表实现固定表头和列
qin123qq的专栏
12-13 449
固定表头和列 .FixedTitleRow { position: relative; top: expression(this.offsetParent.scrollTop); z-index: 10; background-color:
表格的行列固定 css+div
Jane's Blog
05-26 1193
首先说明，这个方法只能在IE下有效果，其他浏览器不行，下面附上代码css部分：/*行固定*/.fex_col{   top:expression(document.getElementById(values_div).scrollTop-1);    position:relative ;   z-index:3;  background-color:#CCFFFF;}/*列固
IE的表头固定/表头不动（使用expression）
weixin_34249367的博客
06-16 636
本文主要介绍在IE浏览器中，实现表头固定的一种方法。这种方法使用到了 IE 浏览器特有的 expression 方法。 表头固定DEMO1 主要代码： <style type="text/css"> .fixedHeaderTr { position:relative; //...
html页面表格竖变成横,html表格，表头竖向固定，横向滚动的例子
weixin_42519126的博客
06-03 531
该楼层疑似违规已被系统折叠隐藏此楼查看此楼head:first-child+body thead[class].fixedHeader th {width: 200px}head:first-child+body thead[class].fixedHeader th + th {width: 250px}head:first-child+body thead[class].fixedHeade...
html表格冻结原理,html表格table冻结行和列
weixin_34723270的博客
06-03 771
转自http://liyinlei.iteye.com/blog/2077714这种固定行列的方式只适用于IE,并且只适用于数据量较少的情况.数据量很多时是非常耗资源的完美冻结列和行 .FixedHeaderColumnsTableDiv{overflow: auto;position: relative;}.FixedCell{position: relative;top: expression...
python 展示表格_python按照表格列的方式展示数组数据
weixin_36484465的博客
02-09 1154
python按照表格列的方式展示数组数据把数组里的元素按照对其的表格列方式输出，可以指定列宽，每行三个def columnar_display(list, pagewidth=77) :maxlen = 0for item in list :l = len(str(item))if l > maxlen :maxlen = lmaxlen += 2 # space it out a li...
固定表格行列(expression)在IE下适用
09-05
本文将深入探讨如何使用expression来固定表格行列，并提供相应的代码示例。 首先，CSS表达式(expression)是IE特有的属性，它允许开发者将CSS样式值与JavaScript表达式关联起来，从而动态计算样式。然而，由于性能...
JS冻结表格,锁定表头,固定行列（上下左右4个方向）
11-12
JS冻结窗格（表头锁定）插件，自适应表格单元格宽度，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器），代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结，因为有防止重复冻结功能)，...
css固定表头、行头样式代码
09-25
在网页设计中，有时我们需要创建一个表格，其中包含固定的表头和行头，即使当用户滚动页面时，这些头部仍然可见。CSS（层叠样式表）提供了一种优雅的方式来实现这种效果，使得用户在查看大量数据时能更容易地导航。...
【】Table锁定行列
What are you looking for now
05-31 2417
摘要：在使用表格显示数据时我们经常会遇到数据过多无法一屏完全显示的问题，这个时候我们就会给用户显示滚动条来拖动。但是多数情况下表格是带有表头的，纵向拖动往往就看不到表头；而横向拖动又会出现看不到主题列（例如统计某人基本信息时姓名就是主题列），这个时候怎么办呢？答案就是行列锁定。 主要内容： 1.行列锁定的常用方法 2.IE下实现行列锁定 3.使用jQuery开发一个简单的行列锁定
细胞的数据集 一万七张 粗糙粗糙
最新发布
12-05
细胞的数据集 一万七张 粗糙粗糙
六自由度机械臂ANN人工神经网络设计：正向逆向运动学求解、正向动力学控制、拉格朗日-欧拉法推导逆向动力学方程(Matlab代码实现)
12-05
六自由度机械臂ANN人工神经网络设计：正向逆向运动学求解、正向动力学控制、拉格朗日-欧拉法推导逆向动力学方程(Matlab代码实现)内容概要：本文档围绕六自由度机械臂的ANN人工神经网络设计展开，详细介绍了正向与逆向运动学求解、正向动力学控制以及基于拉格朗日-欧拉法推导逆向动力学方程的理论与Matlab代码实现过程。文档还涵盖了PINN物理信息神经网络在微分方程求解、主动噪声控制、天线分析、电动汽车调度、储能优化等多个工程与科研领域的应用案例，并提供了丰富的Matlab/Simulink仿真资源和技术支持方向，体现了其在多学科交叉仿真与优化中的综合性价值。; 适合人群：具备一定Matlab编程基础，从事机器人控制、自动化、智能制造、电力系统或相关工程领域研究的科研人员、研究生及工程师。; 使用场景及目标：①掌握六自由度机械臂的运动学与动力学建模方法；②学习人工神经网络在复杂非线性系统控制中的应用；③借助Matlab实现动力学方程推导与仿真验证；④拓展至路径规划、优化调度、信号处理等相关课题的研究与复现。; 阅读建议：建议按目录顺序系统学习，重点关注机械臂建模与神经网络控制部分的代码实现，结合提供的网盘资源进行实践操作，并参考文中列举的优化算法与仿真方法拓展自身研究思路。
特定版本tomcat-8.0.28.zip.7z
12-05
特定版本tomcat-8.0.28.zip.7z
Java设计模式全面解析与实战应用项目_涵盖创建型模式如构造者模式工厂模式原型模式与单例模式关系型模式如责任链模式命令模式迭代器模式观察者模式解释器模式中介者模式.zip
12-05
Java设计模式全面解析与实战应用项目_涵盖创建型模式如构造者模式工厂模式原型模式与单例模式关系型模式如责任链模式命令模式迭代器模式观察者模式解释器模式中介者模式.zip
2026年系统架构设计师(第一批次)综合知识考试题库及参考答案.pdf
12-05
2026年系统架构设计师(第一批次)综合知识考试题库及参考答案.pdf
HTML实现固定表格头和列的方法
`position:relative`和`left:expression(this.parentElement.offsetParent.scrollLeft)`组合起来，确保列头在水平方向上随页面滚动保持固定。`z-index`和`background-color`的设置与`.FixedTitleRow`类似。 3. `....
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值