现在的位置: 首页 > 综合 > 正文

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

2013年09月19日 ⁄ 综合 ⁄ 共 2667字 ⁄ 字号 评论关闭

原帖地址: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>

抱歉!评论已关闭.