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

最新推荐文章于 2021-06-27 22:51:01 发布

iteye_9193

最新推荐文章于 2021-06-27 22:51:01 发布

阅读量387

点赞数

分类专栏： javascript特效文章标签：单元测试 IE 浏览器 CSS

本文链接：https://blog.csdn.net/iteye_9193/article/details/81648200

版权

javascript特效专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<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>

iteye_9193

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DHTML,Table标签,固定行头,固定列头列

&lt;html&gt;&lt;head&gt; &lt;style type="text/css"&gt; &lt;!-- body,table, td, a { font:9pt;} /*重点：固定行头样式*/.scrollRowThead { position: relative; left: ; z-index:0;} /*重点...
复制链接

扫一扫

专栏目录