DHTML,Table标签,固定行头,固定列头列

最新推荐文章于 2021-01-21 13:22:57 发布

原创最新推荐文章于 2021-01-21 13:22:57 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#单元测试 #IE #浏览器 #CSS

javascript特效专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在浏览器中实现表格滚动时保持表头固定的样式方案。该方案通过使用HTML和CSS实现了在滚动长表格时，表头和行头能够始终保持可见的效果。此方法在2006年的IE浏览器上进行了测试，对于其他浏览器，可通过JavaScript实现类似效果。

<html>
<head> 
<style type="text/css"> 
<!-- 
body,table, td, a { 
     font:9pt;
} 
/*重点：固定行头样式*/
.scrollRowThead {
     position: relative; 
     left: ;
     z-index:0;
}
 /*重点：固定表头样式*/
.scrollColThead {
     position: relative;
     top: ;
     z-index:2;
}
/*行列交叉的地方*/
.scrollCR {
     z-index:3;
} 
/*div外框*/
.scrollDiv {
     height:200px;
     clear: both; 
     border: 1px solid #EEEEEE;
     overflow: scroll;
     width: 100%; 
}
/*行头居中*/
.scrollColThead td,.scrollColThead th {
     text-align: center ;
}
/*行头列头背景*/
.scrollRowThead,.scrollColThead td,.scrollColThead th {
     background-color:EEEEEE;
}
/*表格的线*/
.scrolltable {
     border-bottom:1px solid #CCCCCC; 
     border-right:1px solid #CCCCCC; 
}
/*单元格的线等*/
.scrolltable td,.scrollTable th {
     border-left: 1px solid #CCCCCC;
     border-top: 1px solid #CCCCCC; 
     padding: 5px; 
}
--> 
</style>
<script></script>
</head>

<body > 
本演示子兼容ie 浏览器，测试日期2006 年,其他浏览器在div onscroll 事件用js实现和本列相同的样式应该也可实现
<div id="scrollDiv" class="scrollDiv" > 
<table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"> 
<tr class="scrollColThead"  > 
<th class="scrollRowThead scrollCR"  > </th> 
<th colspan="2">列头</th>
<th colspan="10">列头</th> 
</tr>

<tr class="scrollColThead"  > 
<th class="scrollRowThead scrollCR"  >h1</th> 
<th >h2</th> 
<th >h3</th> 
<th >h4</th> 
<th >h5</th> 
<th >565656</th>
<th >565656</th>
<th >5656565656</th>
<th >56565656</th>
<th >56565656</th>
<th >56565656</th>
<th >56565656</th>
<th >56566666666666666666666666666666666666666666666666666666666666666666565656</th>
</tr>

<tr> 
<td class="scrollRowThead"  ><input type="checkbox" name="checkbox" value="checkbox"> a</td> 
<td>单元格2</td>
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr> 

<tr> 
<td class="scrollRowThead"  ><input type="checkbox" name="checkbox2" value="checkbox"> a</td> 
<td>单元格2</td>
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr> 

<tr> 
<td class="scrollRowThead"  ><input type="checkbox" name="checkbox3" value="checkbox"> a</td> 
<td>单元格2</td>
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr> 

<tr> 
<td class="scrollRowThead"  ><input type="checkbox" name="checkbox4" value="checkbox"> a</td> 
<td>单元格2</td>
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr> 

<tr> 
<td class="scrollRowThead"  ><input type="checkbox" name="checkbox5" value="checkbox"> a</td> 
<td>单元格2</td>
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr> 

<tr> 
<td class="scrollRowThead"  ><input type="checkbox" name="checkbox6" value="checkbox"> a</td> 
<td>单元格2</td>
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr> 

<tr> 
<td class="scrollRowThead"  ><input type="checkbox" name="checkbox7" value="checkbox"> a</td> 
<td>单元格2</td>
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr> 

</table> 
</div> 
</body>
</html>