antony--异域空间
性格左右命运,气度影响格局!
<html>
<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: 320px; }
/*行头居中*/
.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>
<body>
<h1>利用CSS代码让Table产生固定表头</h1>
<h3>www.865171.cn</h3>
<div id="scrollDiv" class="scrollDiv" >
<table border="0" cellpadding="3" cellspacing="0" width="300" class="scrollTable">
<tr class="scrollColThead"  >
  <th class="scrollRowThead scrollCR"  >&nbsp;</th>
  <th colspan="2">列头</th>
  <th colspan="2">列头</th>
</tr>
<tr class="scrollColThead"  >
  <th class="scrollRowThead scrollCR"  >h1</th>
  <th >h2</th>
  <th >h3</th>
  <th >h4</th>
  <th >h5</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>
</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>
</tr>
<tr>
  <td nowrap class="scrollRowThead"  >
    <input type="checkbox" name="checkbox3" value="checkbox">
    c</td>
  <td nowrap>单元格2</td>
  <td nowrap>单元格3</td>
  <td nowrap>单元格4</td>
  <td nowrap>单元格5</td>
</tr>
<tr>
  <td class="scrollRowThead"  >
    <input type="checkbox" name="checkbox4" value="checkbox">
    d</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
</tr>
<tr>
  <td class="scrollRowThead"  >
    <input type="checkbox" name="checkbox5" value="checkbox">
    e</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
</tr>
<tr>
  <td class="scrollRowThead"  >
    <input type="checkbox" name="checkbox6" value="checkbox">
    f</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
</tr>
<tr>
  <td class="scrollRowThead" >
    <input type="checkbox" name="checkbox7" value="checkbox">
    g</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
</tr>
</table>
</div>
</body>

</html>

 

 <html>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    
<title>固定表头和列</title>
    
<style>

        .FixedTitleRow
        
{
            position
: relative; 
            top
: expression(this.offsetParent.scrollTop); 
            z-index
: 10;
            background-color
: #E6ECF0;
        
}
        
        .FixedTitleColumn
        
{
            position
: relative; 
            left
: expression(this.parentElement.offsetParent.scrollLeft);
        
}
        
        .FixedDataColumn
        
{
            position
: relative;
            left
: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            background-color
: #E6ECF0;
        
}
    
</style>
</head><body>
<div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;
    position: absolute; height: 200px;"
>
    
<table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0'
        
style='table-layout: auto' bordercolor='lightgrey'>
    
<tbody>
    
<tr class="FixedTitleRow">
        
<td class="FixedTitleColumn">ID0</td>
        
<td class="FixedTitleColumn">CK0</td>
        
<td class="FixedTitleColumn">Code0</td>
        
<td class="FixedTitleColumn">Descirption0</td>
        
<td class="FixedTitleColumn">TOL0</td>
        
<td>XS0</td>
        
<td>SS0</td>
        
<td>MS0</td>
        
<td>DS0</td>
        
<td>BS0</td>
        
<td>XL0</td>
        
<td>ML0</td>
        
<td>DL0</td>
        
<td>EM0</td>
        
<td>BM0</td>
    
</tr><tr>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr>
    
</tbody>
    
</table>
</div>
</body></html>

posted on 2010-11-19 17:37  antony.net  阅读(942)  评论(0编辑  收藏  举报