css 实现的TABLE 固定行列(IE)

最新推荐文章于 2022-06-07 17:07:52 发布

f0rwin

最新推荐文章于 2022-06-07 17:07:52 发布

阅读量4.7k

点赞数

分类专栏： html 代码收藏文章标签： table ie css javascript 浏览器 class

html 代码收藏专栏收录该内容

3 篇文章 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%; 
text-align:center;
}
/*行头居中*/
.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   language="javascript"><!--   
  window.onresize   =   function(){mm();}   
  function   mm()   
  {   
      var   div   =   document.getElementById("scrollDiv");
      div.style.width=document.body.clientWidth-10;
      div.style.height=document.body.clientHeight-14;  
  }   
  //-->   
  </script>
</head><body  scroll="no" onload="mm()">
<div id="scrollDiv" class="scrollDiv" > 
<table border="0" cellpadding="3" cellspacing="0" width="100%"  class="scrollTable"> 
 <tr class="scrollColThead"  > 
<th class="scrollRowThead scrollCR" colspan="13" >
本演示子兼容ie 浏览器，测试日期2006 年,其他浏览器在div onscroll 事件用js实现和本列相同的样式应该也可实现
</th> 
</tr>
<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" style="width: 20px">
  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">
  b</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 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> </td>
<td nowrap> </td>
<td nowrap> </td>
<td nowrap> </td>
<td nowrap> </td>
<td nowrap> </td>
<td nowrap> </td>
<td nowrap> </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> </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">
  3</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">
  4</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">
  5</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> 
 