`
hwpok
  • 浏览: 251820 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

固定表头和列

    博客分类：
  • Html
 
阅读更多
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> <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>
分享到：
| Java 操作时间类(转)
评论
发表评论

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

相关推荐

    GridView 固定表头和列

    它提供了丰富的功能，如排序、分页、筛选等，而“固定表头和列”则是提高用户体验的一个重要特性。在用户滚动页面时，保持表头和部分列始终可见，能够帮助用户更好地理解和跟踪数据。 实现GridView固定表头和列，...

    html table 固定表头和列

    "html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`定义表格行，`&lt;th&gt;`定义表头...

    GridView固定表头和列 实例（GridView冻结表头和列）

    本实例主要关注如何实现GridView的固定表头和列，使得用户在滚动浏览长表格时，表头和部分列始终保持可见，提高用户体验。 GridView冻结表头和列的需求在大数据量展示时尤为重要，因为表头的可见性有助于用户在浏览...

    CSS 固定表头和列

    在处理大型数据表格时，为了提高用户体验，我们常常需要实现固定表头和列的效果，这样用户在滚动页面时，表头和列标签始终保持可见，方便用户定位数据。本教程将详细介绍如何使用CSS实现这一功能。 首先，我们需要...

    div+css 固定表头和列

    div+css 固定表头和列div+css 固定表头和列

    jquery 固定表头和列

    总结来说，实现jQuery固定表头和列主要涉及HTML布局、CSS样式和jQuery的滚动事件监听。通过合理地组合这些技术，我们可以创建出用户友好的数据展示表格，即使在大量数据下也能保持清晰的结构。实际应用中，根据需求...

    table固定表头和列头

    固定表头和列头

    h5 固定表头及列头demo

    "h5 固定表头及列头demo"是针对H5网页中的数据展示问题而设计的一个实例，它解决了在滚动时保持表头和列头可见的问题。这种技术在大数据量的表格中尤其有用，因为它能让用户在浏览长表格时始终能看到列名和行名，...

    vue表格实现固定表头首列

    在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...

    js table固定表头,固定列,全浏览器兼容

    在本案例中，"FixTab FixTab 固定列"标签暗示了可能使用了一个名为FixTab的库或插件，用于处理表格的固定表头和列问题。"index.html"是网页的主入口文件，可能包含了HTML结构以及对FixTab的引用。"jquery-1.6.1.js...

    JS固定表头和左边列V2.0（源码）

    锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听（当触发 window.onresize时自动重新固定表头） 增加左边固定位置鼠标滚轮事件

    复杂表头固定表头和列.html

    复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用

    Android可固定表头和第一列自定义表格

    Android可固定表头和第一列自定义表格，集成简单。 API使用说明： LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ...

    用css样式固定表头和列

    在IT行业的前端开发中，使用CSS来固定表头或列是一项常见的需求，尤其是在处理大量数据时，这样的设计能显著提升用户体验。本文将深入探讨如何利用CSS实现这一功能，基于提供的HTML代码片段，我们将详细解析其背后的...

    实现Table表头和列固定

    需要注意的是，实现固定表头和列的过程中，可能会遇到浏览器兼容性问题，尤其是对于较老的浏览器。因此，需要确保CSS和JavaScript代码经过充分测试，确保在主流浏览器上正常工作。 总的来说，实现Table表头和列固定...

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

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

    固定列头表头ListScroll

    【固定列头表头ListScroll】是一种在Android开发中实现的高级UI组件，它结合了ListView和ScrollView的优点，主要用于展示大量数据并具有横向滚动和纵向滚动功能的表格。这种组件通常用于显示复杂的数据结构，例如...

    Jquery table固定表头,固定列,全浏览器兼容

    下面我们将深入探讨如何使用 jQuery 和相关的 CSS 技术来创建一个具有固定表头和固定列的表格，并确保全浏览器兼容。 首先，jQuery 是一个强大的 JavaScript 库，它简化了 DOM 操作、事件处理、动画和Ajax交互。在...

    table固定表头和指定列

    当表格数据较多时，为了提供良好的用户体验，我们通常需要实现表格的固定表头（Fixed Header）和固定列（Fixed Column）功能。这允许用户在滚动浏览长表格时，始终保持表头和指定列可见，便于快速定位和理解数据。 ...

    css固定表头和列.html

    css固定table表头和列，亲测可用

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