DHTML,Table標籤,固定行頭,固定列頭

原帖地址:http://blog.csdn.net/FlashElf/archive/2006/09/07/1188856.aspx

 

注:以下演示子在 ie 下測試成功,dhtml 的

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

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

發佈了53 篇原創文章 · 獲贊 31 · 訪問量 75萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章