`

JS 固定列和头部固定

 
阅读更多
<html>
<head>
   <title>Fixed Header And Columns</title>
   <style type="text/css">
    .Freezing {
     z-index: 10;
     position: relative;
     top: expression(this.offsetParent.scrollTop)
    }
  
    .FreezingCol {
     z-index: 1;
     left: expression(document.getElementById("freezingDiv").scrollLeft);
     position: relative
    }
  
    #DataGrid1 tr{color:#003399;background-color:White;}
   </style>
</head>
<body>
   <div id="freezingDiv" style="overflow:auto; width:400px; height:155px">
<table cellspacing="0" cellpadding="4" rules="all" bordercolor="#3366CC" border="1" id="DataGrid1" style="background-color:White;border-color:#3366CC;border-width:1px;border-style:None;width:900px;border-collapse:collapse;">
   <tr class="Freezing"   style="color:#CCCCFF;background-color:#003399;font-weight:bold;">
    <td class="FreezingCol">ID</td> 
    <td class="FreezingCol">XXXX</td>
    <td>XXXXX/td> 
    <td>XXXXX</td> 
    <td>XXXXX</td> 
    <td>XXXXX</td> 
    <td>XXXXX</td>
   </tr> 
   <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr> 
  <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr>
  <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr> 
  <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr>
  <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr>
  <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr>
  <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr> 
   <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr>
   <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr>
   <tr> 
    <td class="FreezingCol"><span>1</span> </td>   
    <td class="FreezingCol"> <span>aaaa</span>     </td>  
   <td>bbbb</td>   
   <td>(0952)26-64XX</td>   
   <td>eeeeee</td>   
   <td>ccccc</td>   
   <td>ddddd</td>
   </tr>     
</table>
</div>
</body>
</html>


修改固定----------------------------------------title

<html>

<head>
<style>
table {
        border-collapse:collapse;
        border-spacing:0;
       border-right-color:#00FFCC;
   border-bottom-color:#00FFCC;
   border-left-color:#00FFCC;
    }
.tdStyle {
border-top: 3px solid #FF0000;
border-left:2px solid #FF0000;
border-right:1px solid #FF0000;
        text-align:center;
position: relative;
width:150px;
background-color: #9ACD32;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft-1);
    }
.trStyle{
height:50px;
z-index: 10;
    position: relative;
    top: expression(this.offsetParent.scrollTop-3);
}
</style>
</head>
<div id="freezingDiv" style="overflow:auto; width:600px; height:155px">
<table border="1">
<tr class="trStyle" >
<td class="tdStyle">发布日期：</td>
<td class="tdStyle">2010-11-10</td>
<td class="tdStyle">工作地点：</td>
<td class="tdStyle">宁波</td>
</tr>
<tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr>
<tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr><tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr><tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr>
<tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr>
<tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr><tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr><tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr>
</table>
</div>
</html>
-----------------------------------------------------------------
头和列固定
<html>
<style>

table{
border:1px solid red;
border-collapse:collapse;
width:600px;
}

.FreezingCol{
height:50px;
z-index: 10;
    position: relative;
    top: expression(this.offsetParent.scrollTop);
}
.trStyle{
border: 2px solid #FF0000;
    text-align:center;
position: relative;
width:150px;
background-color: #9ACD32;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);

}

.tdStyle{
z-index: 1;
position: relative;
left: expression(document.getElementById("freezingDiv").scrollLeft);
border:1px solid blue;
background-color: #FFEBCD;
width:100px;
}
</style>

<body>
<div id="freezingDiv" style="overflow:auto; width:400px; height:155px">
<table>

<tr class="FreezingCol">
<td class="tdStyle">ID</td><td class="trStyle">xxxx</td><td class="trStyle">xxxx</td><td class="trStyle">xxxx</td><td class="trStyle">xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr><tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr><tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr><tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
</tr>
</table>
</body>
</html>
分享到：
| JS 日期控件用到的属性
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics