`
bluedusk
  • 浏览: 270269 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

固定表头列头Javascript代码

JavaScriptHTML 
阅读更多
  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4.     <title>固定表头和列</title>
  5.     <style>
  6.         .FixedTitleRow
  7.         {
  8.             position: relative;
  9.             top: expression(this.offsetParent.scrollTop);
  10.             z-index: 10;
  11.             background-color: #E6ECF0;
  12.         }
  13.        
  14.         .FixedTitleColumn
  15.         {
  16.             position: relative;
  17.             left: expression(this.parentElement.offsetParent.scrollLeft);
  18.         }
  19.        
  20.         .FixedDataColumn
  21.         {
  22.             position: relative;
  23.             left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
  24.             background-color: #E6ECF0;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.    <div id="scrollDiv" style="width: 400px; overflow: auto; cursor: default; display: inline;
  30.         position: absolute; height: 200px;">
  31.         <table id='accountTable' width='550' height='230' cellpadding='0' cellspacing='0' border='1'
  32.             style='table-layout: auto' bordercolor='lightgrey'>
  33.             <tbody>
  34.                 <tr class="FixedTitleRow">
  35.                     <td class="FixedTitleColumn">
  36.                         ID0</td>
  37.                     <td class="FixedTitleColumn">
  38.                         CK0</td>
  39.                     <td class="FixedTitleColumn">
  40.                         Code0</td>
  41.                     <td class="FixedTitleColumn">
  42.                         Descirption0</td>
  43.                     <td class="FixedTitleColumn">
  44.                         TOL0</td>
  45.                     <td>
  46.                         XS0</td>
  47.                     <td >
  48.                         SS0</td>
  49.                     <td>
  50.                         MS0</td>
  51.                     <td>
  52.                         DS0</td>
  53.                     <td>
  54.                         BS0</td>
  55.                     <td>
  56.                         XL0</td>
  57.                     <td>
  58.                         ML0</td>
  59.                     <td>
  60.                         DL0</td>
  61.                     <td>
  62.                         EM0</td>
  63.                     <td>
  64.                         BM0</td>
  65.                 </tr>
  66.                 <tr>
  67.                     <td class="FixedDataColumn">
  68.                         88</td>
  69.                     <td class="FixedDataColumn">
  70.                         88</td>
  71.                     <td class="FixedDataColumn">
  72.                         88</td>
  73.                     <td class="FixedDataColumn">
  74.                         88</td>
  75.                     <td class="FixedDataColumn">
  76.                         88</td>
  77.                     <td>
  78.                         22</td>
  79.                     <td>
  80.                         22</td>
  81.                     <td>
  82.                         22</td>
  83.                     <td>
  84.                         22</td>
  85.                     <td>
  86.                         22</td>
  87.                     <td>
  88.                         22</td>
  89.                     <td>
  90.                         22</td>
  91.                     <td>
  92.                         22</td>
  93.                     <td>
  94.                         22</td>
  95.                     <td>
  96.                         22</td>
  97.                 </tr>
  98.                 <tr>
  99.                     <td class="FixedDataColumn">
  100.                         111</td>
  101.                     <td class="FixedDataColumn">
  102.                         111</td>
  103.                     <td class="FixedDataColumn">
  104.                         1111</td>
  105.                     <td class="FixedDataColumn">
  106.                         This is Test</td>
  107.                     <td class="FixedDataColumn">
  108.                         1</td>
  109.                     <td>
  110.                         001</td>
  111.                     <td>
  112.                         002</td>
  113.                     <td>
  114.                         003</td>
  115.                     <td>
  116.                         004</td>
  117.                     <td>
  118.                         005</td>
  119.                     <td>
  120.                         006</td>
  121.                     <td>
  122.                         007</td>
  123.                     <td>
  124.                         008</td>
  125.                     <td>
  126.                         009</td>
  127.                     <td>
  128.                         010</td>
  129.                 </tr>
  130.                 <tr>
  131.                     <td class="FixedDataColumn">
  132.                         111</td>
  133.                     <td class="FixedDataColumn">
  134.                         111</td>
  135.                     <td class="FixedDataColumn">
  136.                         1111</td>
  137.                     <td class="FixedDataColumn">
  138.                         This is Test</td>
  139.                     <td class="FixedDataColumn">
  140.                         1</td>
  141.                     <td>
  142.                         001</td>
  143.                     <td>
  144.                         002</td>
  145.                     <td>
  146.                         003</td>
  147.                     <td>
  148.                         004</td>
  149.                     <td>
  150.                         005</td>
  151.                     <td>
  152.                         006</td>
  153.                     <td>
  154.                         007</td>
  155.                     <td>
  156.                         008</td>
  157.                     <td>
  158.                         009</td>
  159.                     <td>
  160.                         010</td>
  161.                 </tr>
  162.                 <tr>
  163.                     <td class="FixedDataColumn">
  164.                         111</td>
  165.                     <td class="FixedDataColumn">
  166.                         111</td>
  167.                     <td class="FixedDataColumn">
  168.                         1111</td>
  169.                     <td class="FixedDataColumn">
  170.                         This is Test</td>
  171.                     <td class="FixedDataColumn">
  172.                         1</td>
  173.                     <td>
  174.                         001</td>
  175.                     <td>
  176.                         002</td>
  177.                     <td>
  178.                         003</td>
  179.                     <td>
  180.                         004</td>
  181.                     <td>
  182.                         005</td>
  183.                     <td>
  184.                         006</td>
  185.                     <td>
  186.                         007</td>
  187.                     <td>
  188.                         008</td>
  189.                     <td>
  190.                         009</td>
  191.                     <td>
  192.                         010</td>
  193.                 </tr>
  194.                 <tr>
  195.                     <td class="FixedDataColumn">
  196.                         111</td>
  197.                     <td class="FixedDataColumn">
  198.                         111</td>
  199.                     <td class="FixedDataColumn">
  200.                         1111</td>
  201.                     <td class="FixedDataColumn">
  202.                         This is Test</td>
  203.                     <td class="FixedDataColumn">
  204.                         1</td>
  205.                     <td>
  206.                         001</td>
  207.                     <td>
  208.                         002</td>
  209.                     <td>
  210.                         003</td>
  211.                     <td>
  212.                         004</td>
  213.                     <td>
  214.                         005</td>
  215.                     <td>
  216.                         006</td>
  217.                     <td>
  218.                         007</td>
  219.                     <td>
  220.                         008</td>
  221.                     <td>
  222.                         009</td>
  223.                     <td>
  224.                         010</td>
  225.                 </tr>
  226.             </tbody>
  227.         </table>
  228.     </div>
  230. </body>
  231. </html>
分享到：
| 通过样式表实现固定表头和列(ZZ)
评论
1 楼 olived 2010-12-22  
你这是javascrpit代码么
发表评论

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

相关推荐

    h5 固定表头及列头demo

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

    vue表格实现固定表头首列

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

    html table 固定表头和列

    通常，它会结合HTML、CSS和可能的JavaScript来实现固定表头和列的功能。 五、兼容性和优化 虽然`position: sticky;`在现代浏览器中得到了广泛支持，但老版本的IE浏览器并不支持。为了确保兼容性，可能需要使用...

    GridView 固定表头和列

    实现GridView固定表头和列，主要涉及到CSS样式和JavaScript的运用，以及可能的服务器端代码调整。下面我们将详细介绍这个过程： 1. **CSS样式调整**： - 表头固定：通过CSS将GridView的表头（`&lt;thead&gt;`）设置为`...

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

    这个压缩包中的“asp.net html+table固定表头和左侧列”很可能是一个示例项目，包含了必要的HTML、CSS和可能的JavaScript代码，可以直接应用于你的ASP.NET项目中。使用时，只需将这些代码整合到你的页面结构中，调整...

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

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

    固定table表头的插件

    在实际应用中，"golovko-Fixed-Header-Table-aa40378"插件可能提供了更高级的功能，如自定义样式、滚动平滑效果、多列固定等，使得固定表头的实现更加灵活和强大。开发者可以通过解压并查看压缩包中的文件，学习其...

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

    总之，创建一个具有固定表头和列的全浏览器兼容的 jQuery 表格涉及多方面的技术，包括 JavaScript 事件监听、DOM 操作、CSS 定位和兼容性处理。通过合理地组织代码和利用现有的资源，我们可以构建出高性能且用户友好...

    JavaScript:固定table的表头

    通过学习和理解这些代码，你可以更深入地掌握如何利用JavaScript实现固定表头的技巧。在实际应用中，还可以考虑结合现有的库，如jQuery或现代前端框架（如React, Vue, Angular等）中的插件，以简化开发过程并提高...

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

    最后，"Table.js"可能是FixTab的核心代码，实现了固定表头和列的功能。 在实现全浏览器兼容时，开发者需要考虑各种浏览器之间的差异，例如IE8及以上的浏览器可能不支持CSS3的某些特性，如"position: sticky"。这时...

    实现Table表头和列固定

    因此，需要确保CSS和JavaScript代码经过充分测试，确保在主流浏览器上正常工作。 总的来说，实现Table表头和列固定是一项技术挑战，但通过合理运用HTML、CSS和JavaScript，以及JSP的动态生成能力，可以创建出用户...

    html Table 表头固定的实现

    在实现固定表头的场景中，colgroup标签可以用来为表头和表格主体中相对应的列指定统一的宽度。这样，无论表格如何滚动，表头列和表格主体的列宽度都会保持一致。 接下来，我们看下如何通过CSS来定义固定表头的效果...

    固定表头的DataGrid

    在处理大数据集时，为了提供更好的用户体验，常常需要实现固定表头的功能，使得用户在滚动浏览内容时，表头始终保持可见，以便于跟踪列对应的数据。本文将深入探讨“固定表头的DataGrid”这一主题，以及如何实现这一...

    固定表格表头的代码

    `fixed表头.html`文件中应该包含类似上述的HTML结构和CSS样式，可能还包含了JavaScript代码以实现更复杂的交互效果。通过查看和学习这个文件，你可以进一步理解如何在实际项目中应用固定表头的技术，提升网页的数据...

    table固定表头和指定列

    在压缩包文件"表格（固定表头、固定列）"中，可能包含了示例代码、HTML文件、CSS样式表和JavaScript脚本，用于演示如何实现这个功能。通过学习和分析这些文件，你可以了解到具体的实现细节，包括如何设置CSS规则，...

    固定表头的使用

    总结，BIRT固定表头的实现涉及报表设计和JavaScript编程两方面。通过设置报表元素和编写JQUERY代码，我们可以确保表头在用户滚动时始终保持可见，从而提高报表的可读性和用户体验。虽然提供的代码示例可能在某些...

    用css样式固定表头和列

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

    jquery 固定表头 表列

    对于初学者，可以通过阅读和学习这些代码，了解如何结合`jQuery`和CSS来实现固定表头和表列。同时，为了提高性能和用户体验，还需要关注插件的优化，比如减少DOM操作，避免不必要的重绘和回流，以及合理利用缓存等...

    GridView固定表头(不用javascript只用CSS!，很好用

    然而，当数据量较大时，用户在滚动页面查看数据的过程中，可能会失去对列头的参考，这时就需要实现GridView的表头固定功能。本文将详细讲解如何仅使用CSS实现GridView固定表头，无需借助JavaScript，从而提高网页...

    gridview固定冻结列与表头

    因此，优化JavaScript代码、减少不必要的重绘和回流，以及利用硬件加速等技术都是提高性能的关键。 6. **兼容性和浏览器测试**：最后，确保在各种主流浏览器（如Chrome、Firefox、Safari、Edge和Internet Explorer...

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