<html>

<head>

 

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

 

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

<tr>

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

  1</td>

<td nowrap>单元格2</td>

<td nowrap>单元格3</td>

<td nowrap>单元格4</td>

<td nowrap>单元格5</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

<td nowrap>&nbsp;</td>

</tr>

<tr>

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

  2</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="checkbox5" value="checkbox">

  3</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="checkbox6" value="checkbox">

  4</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="checkbox7" value="checkbox">

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

posted on 2008-11-24 16:28  新郎  阅读(5687)  评论(3编辑  收藏  举报