|
本文为大家介绍下使用expression固定表格行列这是一种在IE下适用的固定行列的方法感兴趣的朋友可以学习下希望对大家有所帮助 这是一种在IE下适用的固定行列的方法其具体代码如下: 复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN">
<html>
<head>
<title> New Document </title>
<style>
FixedTitleRow
{
position: relative;
top: expression(thisoffsetParentscrollTop);
zindex: ;
width: px;
backgroundcolor: #FFCC;
}
FixedDataColumn
{ position: relative;
left: expression(thisparentElementoffsetParentparentElementscrollLeft);
backgroundcolor: #EECF;
}
FixedColumnAndRows{
position: relative;
top: expression(thisoffsetParentscrollTop);
left: expression(thisoffsetParentscrollLeft);
zindex: ;
width: px;
backgroundcolor: #FFCC;
}
td{wordbreak : keepall;}
</style>
</head>
<body>
<div id="scrollDiv" style="width:; height:; overflow: auto; cursor: default; display: inline; position: absolute;">
<table width="%" cellpadding= cellspacing= bordercolor=lightgrey border="" style="tablelayout:fixed">
<tr bgcolor="#FFCC" style="fontsize:px; textalign:center; fontweight:bold;height:px;">
<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="fontsize:px; textalign:center;height:px;">
<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="fontsize:px; textalign:center;height:px;">
<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="fontsize:px; textalign:center;height:px;">
<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="fontsize:px; textalign:center;height:px;">
<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="fontsize:px; textalign:center;height:px;">
<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="fontsize:px; textalign:center;height:px;">
<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="fontsize:px; textalign:center;height:px;">
<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并且只适用于数据量较少的情况数据量很多时是非常耗资源的!*/
|
