`

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 日期控件用到的属性
评论
发表评论

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

相关推荐

    锁定表头和固定列(Fixed table head and columns)

    实现方法与表头锁定类似，但可能需要更复杂的布局和JavaScript处理，尤其是当表格行数较多时，需要确保固定列与可滚动部分的同步。 在HTML文件中，通常会有一个包含表头的`&lt;thead&gt;`元素和一个包含主体数据的`...

    移动端table固定表头与固定第一列

    总结起来，实现移动端table的固定表头与固定第一列，主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术，我们能够在移动端提供更好的数据浏览体验。

    html table 固定表头和列

    固定列的方法相对复杂，因为它涉及到表格内部的布局。一种常见方法是使用CSS的`position: absolute;`配合JavaScript来实现。以下是一个基本步骤： 1. 将第一列的`&lt;td&gt;`元素替换为`&lt;div&gt;`，并设置合适的宽度和定位。...

    Js实现表格头部第一行下拉固定

    总的来说，实现“表格头部第一行下拉固定”是通过结合HTML结构、CSS样式和JavaScript事件处理来完成的。理解这一过程可以帮助开发者更好地掌握网页动态效果的实现，提升用户体验。在实际项目中，可以根据需求选择...

    滚动条下拉DIV固定在头部不动

    文件“jquery-1.9.1.min.js”是jQuery库的一个版本，这是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画等功能，使得编写这样的特效变得更加容易。 在实现滚动固定效果时，首先需要在HTML中定义好要...

    h5 固定表头及列头demo

    总的来说，"h5 固定表头及列头demo"是一个实用的示例，它结合了H5、CSS和JavaScript的技术，以实现对长表格的优化显示。通过学习和理解这个示例，开发者能够提升在网页开发中的用户体验设计能力，特别是在处理数据...

    固定页面头部和底部中间滚动

    在IT行业中，尤其是在移动应用开发领域，Android是一个广泛使用的平台。标题"固定页面头部和底部中间滚动"涉及到...在实际应用中，开发者需要结合这些知识来创建具有固定头部和底部，且中间内容可滚动的移动应用界面。

    HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）

    HTML和JavaScript是网页开发中的...通过查看和学习这些文件，你可以更深入地理解如何使用HTML和JavaScript来实现固定表头和锁定列的效果。如果你想要在自己的项目中使用或修改这个功能，记得先了解和分析这些源代码。

    asp.net html+table固定表头和左侧列.rar

    例如，使用GridView的HeaderRow和Columns属性，配合JavaScript库如jQuery或纯CSS框架，如Bootstrap，可以轻松地创建具有固定表头和列的表格。 在实际应用中，开发者还需要考虑响应式设计，确保在不同设备和屏幕尺寸...

    jQuery插件冻结行列、固定列固定行，html、table实现

    这个插件通过监听表格容器的滚动事件，动态调整表头和固定列的位置，使其相对于可视区域保持不变。它利用了CSS定位（position）属性，如`position: absolute`或`position: fixed`来实现元素的固定。对于复合表头，...

    页面头部和底部固定

    实现固定头部和底部的基本步骤如下： 1. **固定头部（Header）**： - 通过CSS的`position: fixed;`属性，可以将元素固定在屏幕的某个位置。对于头部，我们将其设置为顶部固定，例如： ``` header { position: ...

    jQuery网页下拉滚动表格头部固定在顶端代码

    为了解决这个问题，"jQuery网页下拉滚动表格头部固定在顶端代码" 提供了一种解决方案，它允许表格的头部在用户滚动页面时始终保持在视口的顶部，这样用户就能始终看到列标题，增强可读性和交互性。 首先，这个解决...

    JS仿171CMS官方网站头部固定特效.zip

    "JS仿171CMS官方网站头部固定特效.zip" 这个压缩包文件的标题表明，它包含了一组JavaScript代码，用于模仿171CMS官方网站上的头部导航栏的固定效果。171CMS可能是一个内容管理系统，其网站的头部导航在滚动页面时能...

    jQuery表格头和列固定插件

    这款插件可以轻松地固定表格的头部和选定的列，使得用户在浏览过程中始终能看到关键信息。 **jQuery库的应用** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。`RWD Table...

    jQuery仿Excel表格右侧与头部固定代码

    "jQuery仿Excel表格右侧与头部固定代码"是一种实现此类功能的技术，它旨在为用户提供一个类似Excel的工作体验，即使在滚动浏览大量数据时也能保持表头和列宽不变，提高数据管理和操作的便捷性。 jQuery是一个强大的...

    jquery头部固定滑动显示.rar

    开发者可以通过查看和学习这个文件来了解如何使用jQuery实现头部固定滑动显示的效果。 要实现这个特效，首先需要在HTML中定义头部元素，并赋予其一个唯一的ID以便于在JavaScript中选中。接着，在CSS中设置初始样式...

    表格头部固定不动，数据滚动插件

    总之，“表格头部固定不动，数据滚动插件”提供了一种有效提升表格数据浏览体验的解决方案，通过锁定表头，使用户在滚动时始终能保持对数据列的理解。通过深入理解这个插件的原理和使用方法，你可以轻松地在自己的...

    JQ固定table头部的插件.zip_Table_自己编写jq固定表格头部插件

    同时，对于响应式设计，可能需要额外的代码来调整固定头部在不同设备和屏幕尺寸下的表现。 总之，“JQ固定table头部的插件”提供了一种有效的方法来提升表格的可读性和用户交互体验。通过理解插件的工作原理和使用...

    jQuery带滚动条头部固定表格代码.zip

    这就是"jQuery带滚动条头部固定表格代码"所解决的问题。 jQuery 是一个广泛使用的JavaScript库，它简化了HTML DOM（文档对象模型）的操作、事件处理、动画设计以及Ajax交互。在本案例中，结合EasyUI——一个基于...

    表头、第一列固定的表格

    在网页设计中，固定表头和第一列是常见的需求，特别是在处理大数据量的表格时，为了保持用户在滚动查看数据时能始终看到列标题和行标识，这种布局方式显得尤为重要。"表头、第一列固定的表格"这个主题，通常涉及到...

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