固定表格行列(expression)在IE下适用

本文为大家介绍下使用expression固定表格行列，这是一种在IE下适用的固定行列的方法，感兴趣的朋友可以学习下，希望对大家有所帮助
 

这是一种在IE下适用的固定行列的方法.其具体代码如下:

复制代码 代码如下:

<!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,并且只适用于数据量较少的情况.数据量很多时是非常耗资源的!*/

时间： 2024-09-12 11:31:10

固定表格行列(expression)在IE下适用的相关文章

固定表格行列(expression)在IE下适用_javascript技巧

这是一种在IE下适用的固定行列的方法.其具体代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <style> .FixedTitleRow { position: relative; top: expression(th

制作强制固定表格大小的效果

强行固定表格大小,一般情况下,如果文字增多表格会自动伸展,而这个脚本可以固定表格大小,文字增多会出现表格内的滚动条,看似仿佛是内帧,感觉非常有用.    "互动学院"经过一年多的努力与网友们的支持,今天终于推出的新的版本.改版后的网站,将立足于互联网在线的教程,有助你更好地掌握电脑的操作.软件的使用. 为了能更好地为大家服务, 以后将会有更多的精彩内容献给大家,请大家继续关心支持"互动学院",同时本站欢迎有相同爱好的朋友一起加盟"互动学院"!  

ASP如何固定表格的标题行和标题列

网上有许关于固定表格的标题行的文章,但是既要固定标题行又要固定标题列的却几乎没有.现我写下如下代码以供大家参考:   <html>   <head>   <title>Untitled Document</title>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   </head>   <sc

如何固定表格的标题行和标题列

网上有许关于固定表格的标题行的文章,但是既要固定标题行又要固定标题列的却几乎没有.现我写下如下代码以供大家参考: <html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><script>function

jsp-我想固定表格的前三列 求大神指教 急急急 在线等

问题描述 我想固定表格的前三列 求大神指教 急急急 在线等 表格是这样的 就是固定前三列 然后让它有滚动条可以拖动看后面的数据 做成这种显示结果的 下拉不用做 只做想有拉的效果 解决方案 easyui的datagrid有固定列的功能 http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem= 看Frozen Columns in DataGrid这个示例 解决方案二:

js操作table元素实现表格行列新增、删除技巧总结_javascript技巧

本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************

Excel2010表格行列怎么转换

  Excel2010表格行列怎么转换         步骤一.选择需要转换为列的行区域 首先打开相应的工作表,选择需要转为列的行单元格区域,如图所示: Excel2010 步骤二.复制选中的行内容 切换到"开始"选项卡,在"剪贴板"选项组中单击"复制"按钮,复制选中内容. 步骤三.打开"选择性粘贴"对话框 单击要转换区域的起始单元格并右击,在弹出的快捷菜单中选择"选择性粘贴"命令,如图所示: Excel2

在WPS中用转置实现表格行列转换

有时,我们需要将已经做好的表格的行.列对调一下,手工转换不仅费时费力,还容易出错,那有没有更简单也更可靠的方式实现表格中的行列转换呢? 方法一:用WPS表格的"选择性粘贴"实现转换. 在WPS表格2005中,选中整个表格,复制到剪贴版,然后将光标置于空白处,从菜单中点选"编辑-选择性粘贴",在弹出的对话框中选中"转置"(图1),确定后即把整个表格"翻了个个儿"粘贴到指定位置了(图2).如果要转换的是WPS文字中的表格,可以先在

WPS表格中单元格设置下拉菜单的方法

  下拉菜单设置方法 1.首先打开WPS表格,选择要设置下拉菜单的单元格,然后切换"数据"选项卡,单击"有效性",如图所示. 2.弹出"数据有效性"设置窗口,在"设置"选项卡里将"允许"设置为"序列","提供下拉箭头"要勾上,"来源"输入要设置下拉菜单的内容,然后单击"确定",如图所示. 3.确定后,下拉菜单就设置完成,请看效果