固定表头和列的方法

最新推荐文章于 2024-11-20 15:36:24 发布

原创最新推荐文章于 2024-11-20 15:36:24 发布 · 560 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #border #scroll #table

javascript 专栏收录该内容

6 篇文章

订阅专栏

<html>
<head><title></title></head>
<style>
.ListTableF {
border:1px solid #8EC2E6;
border-collapse:collapse;
BORDER-BOTTOM: medium none;
    BORDER-LEFT: medium none;
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    margin-top:-1px;
    margin-left:-1px;
    margin-right:-1px;
}
.fixedDiv{
overflow:auto;
height:expression(document.body.clientHeight-240);
width:expression(800);
BORDER-BOTTOM: #94B6E6 1pt solid;
   BORDER-LEFT: #94B6E6 1pt solid;
    BORDER-RIGHT: #94B6E6 1pt solid;
    BORDER-TOP: #94B6E6 1pt solid ;
overflow-x:scroll;
}
.fixedHeaderTr {
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:20;
}
.fixedHeaderTd {
position:relative;
left:expression(this.offsetParent.scrollLeft);
z-index:10;
}
.TableRow {
background-repeat:repeat;
background-position : center left;
BACKGROUND-COLOR: #AEC2E6;
font-size: 12px;
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
height:22;
font-weight: bold;
valign:middle;
}
.TableRow1 {
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
BACKGROUND-COLOR: #AEC2E6;
font-size: 12px;
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
height:22;
font-weight: bold;
valign:middle;
z-index:10;
}
.TableRow2 {
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-repeat:repeat;
background-position : center left;
BACKGROUND-COLOR: #AEC2E6;
font-size: 12px;
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
height:22;
font-weight: bold;
valign:middle;
z-index:30;
}
.RecordRow {
border: inset 1px #94B6E6;
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
font-size: 12px;
border-collapse:collapse;
height:22;
}
</style>
<body>
<div class="fixedDiv">
<table width="1000" border="0" cellspacing="0" align="center" cellpadding="0"

class="ListTableF">
<tr class="fixedHeaderTr">
  <td align="center" width="125" class="TableRow2">第一列</td>
  <td align="center" width="125" class="TableRow">第二列</td>
  <td align="center" width="125" class="TableRow">第三列</td>
  <td align="center" width="125" class="TableRow">第四列</td>
  <td align="center" width="125" class="TableRow">第五列</td>
  <td align="center" width="125" class="TableRow">第六列</td>
  <td align="center" width="125" class="TableRow">第七列</td>
  <td align="center" width="125" class="TableRow">第八列</td>
</tr>
<tr>
  <td align="center" class="TableRow1">第一行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第二行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第三行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第四行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第五行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第六行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第七行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第八行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第九行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十一行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十二行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十三行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十四行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十五行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十六行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十七行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十八行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第十九行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第二十行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第二十一行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第二十二行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第二十三行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
<tr>
  <td align="center" class="TableRow1">第二十四行</td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
  <td align="center" class="RecordRow"> </td>
</tr>
</table>
</body>
</html>
   </script>