固定表格行列(expression)

时间：2024-01-10 19:02:02
<!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/

相关文章