固定表格行列(expression)在IE下適用_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

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

May 16, 2016 pm 05:28 PM

固定

這是一種在IE下適用的固定行列的方法.其具體代碼如下:

複製代碼代碼如下:

 
 
 
 
新文件 
 
.FixedTitleRow 
{ 
位置：相對； 
top: 表達式(this.offsetParent.scrollTop); 
z 索引：10; 
寬度：80px； 
 背景顏色：#FFCC00; 
} 
.FixedDataColumn 
{ 位置：相對; 
左：表達式(this.parentElement.offsetParent.parentElement.scrollLeft); 
背景顏色：#E6ECF0 } 
.FixedColumnAndRows{ 
位置：相對; 
top: 表達式(this.offsetParent.scrollTop); 
左：表達式(this.offsetParent.scrollLeft); 
左：表達式(this.offsetParent.scrollLeft);索引：20; 
寬度：80px; 
背景顏色：#FFCC00; 
} 
td{斷字：保留全部；} 
</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> 
-- 
-- 
-- 
-- 
-- 
 
 
左 
左 
左 
-- 
-- 
-- 
-- 
-- 
-- 
-- 
-- 
-- 
-- 
-- 
-- 
-- 
 -- 
-- 

 
 
左 
左 
左 
-- 
-- 
-- 
-- 
 -- 
-- 
-- 
-- 
-- 
-- 
-- 
-- 
- - 
-- 
-- 

 
 
左 
左 
左 
-- 
-- 
-- 
-- 
-- 
-- 
-- 
 -- 
-- 
-- 
-- 
--  
-- 
-- 
-- 

 
 表> 
> 
 
/*這種實體固定行列的方式只適用於IE，且只適用於資料量較少的情況。是非常消耗資源的！