固定表行列

最新推荐文章于 2022-05-06 17:49:08 发布

xr1128

最新推荐文章于 2022-05-06 17:49:08 发布

阅读量83

点赞数

分类专栏： javascript 文章标签： HTML

本文链接：https://blog.csdn.net/xr1128/article/details/83460914

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

将下列代码copy到html文件中就ok了~

<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>
</table>
</body>
</html>