随笔-77  评论-5  文章-2  trackbacks-0
 

 

<html>

<head>

<!--固定行列头,曲滨200608-->

<style type="text/css">

<!--

body,table, td, a {

font:9pt;

}

 

/*重点:固定行头样式*/

.scrollRowThead

{

     position: relative;

     left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);

     z-index:0;

}

 

/*重点:固定表头样式*/

.scrollColThead {

     position: relative;

     top: expression(this.parentElement.parentElement.parentElement.scrollTop);

     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"  >&nbsp;</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>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td class="scrollRowThead"  ><input type="checkbox" name="checkbox2" value="checkbox">

  b</td>

<td>单元格2</td>

<td>单元格3</td>

<td>单元格4</td>

<td>单元格5</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

</div>

 

</body></html>

 

 

 

 


文章来源:http://stocknewbie.bokee.com/viewdiary.13339039.html
posted on 2009-05-01 10:52 huohuo 阅读(409) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: