`

固定表格第一行(表头固定)，其他行可以上下滚动

CC++C#BBSAjax 
阅读更多

 

本文来源：http://bbs.okajax.com/thread-2482-1-1.html

固定表格第一行，其他行可以上下滚动

固定表格第一行，其他行可以上下滚动表格。在开发中非常有用。比如说制作一张报表时，由于数据太多，滚动到下面的数据，就看不到上面的标题了。现在有了解决的好办法了。
电脑医生奉献！
共享就是快乐！
演示地址：http://bbs.okajax.com/demo/20/
下面是代码，最后有压缩包。
复制内容到剪贴板
代码:
<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
   <title>电脑医生</title>
   <style>
   .fixedHeaderTr    
   {    
   position:relative;    
   top:expression(this.offsetParent.scrollTop);    
   };    

   .mainDiv    
   {    
   overflow:auto;    
   scrollbar-face-color:9999ff;
   height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20));    
   width:expression(document.body.clientWidth-20);    
   }
   </style>
   </head>

<body>


   <br>
   <div class="mainDiv">
         <table width="100%" border=1 cellspacing=0 style="margin-top:-2px" >
         <TR class="fixedHeaderTr" style="">
         <TD nowrap rowspan=2 style="position:relative;background:navy;color:white;">
部门名称</TD>
         <TD nowrap colspan=3 style="background:navy;color:white;" >
第一季度费用</TD>

         <TD nowrap colspan=4 style="background:navy;color:white;" >
第二季度费用</TD>

         </TR>
         <TR class="fixedHeaderTr">
         <TD nowrap style="background:navy;color:white;">1月</TD>
         <TD nowrap style="background:navy;color:white;">2月</TD>
         <TD nowrap style="background:navy;color:white;" colspan="2">3月</TD>
         <TD nowrap style="background:navy;color:white;">4月</TD>
         <TD nowrap style="background:navy;color:white;">5月</TD>
         <TD nowrap style="background:navy;color:white;">6月</TD>
         </TR>
         <TR>
         <TD>管理部</TD>
         <TD>1000</TD>
         <TD>3620</TD>
         <TD colspan="2">1256</TD>
         <TD>5226</TD>
         <TD nowrap >
            251</TD>
         <TD nowrap >
            2351</TD>
         </TR>
         <TR>
         <TD>财务部</TD>
         <TD>1112</TD>
         <TD>2566</TD>
         <TD colspan="2">12456</TD>
         <TD>2563</TD>
         <TD>2256</TD>
         <TD>256</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>  
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>  
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         </table>
   </div>
</body>

</html>

 

分享到：
| xmlns的作用
评论
2 楼 yh1350 2010-09-25  
有没有兼容 Firefox的呀
1 楼 sue0927 2008-09-10  
FF下效果显示不了。
发表评论

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

相关推荐

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

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

    gridview固定表头 横向滚动 纵向固定

    "GridView固定表头横向滚动纵向固定" GridView是一个基于ASP.NET的数据控件，用于显示数据表格。然而，在默认情况下，GridView的表头无法固定在屏幕上，使得用户体验不佳。为了解决这个问题，本文将介绍如何实现...

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

    本教程将详细讲解如何在移动端实现"固定表头与固定第一列"的功能，以提升用户体验，使得用户在滚动时能够始终保持表头和第一列可见。 首先，我们需要理解HTML5中的`&lt;table&gt;`元素，它是用于创建表格的标准标签。在...

    vue表格实现固定表头首列

    在表格中，我们可以将数据存储在一个数组中，然后通过`v-for`指令遍历这个数组，生成表格行。例如： ```html &lt;th v-for="header in headers" :key="header"&gt;{{ header }} ...

    table固定行和列

    在Web开发中，表格（Table）是展示数据的常用元素，但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制，以便在滚动时保持特定行或列始终可见，提升用户浏览大量数据时的体验。下面将详细探讨...

    HTML表格固定第一行第一列效果

    为了解决这个问题，我们可以实现一个类似于Excel的功能，即在滚动时固定表格的第一行和第一列，使得在浏览大量数据时，关键的列名和行标识始终可见。以下将详细介绍如何实现这个效果。 首先，我们需要创建一个基本...

    jsp表头相对固定的2种方法

    在网页设计中，数据展示通常会使用表格，而当表格数据过多时...1. **DataTables**：这是一个强大的jQuery插件，它提供了许多表格增强功能，包括表头固定。引入DataTables库并设置相应的参数，即可轻松实现： ```html ...

    左侧是表头的表格

    1. **多行多表头**：这意味着表格可以拥有不止一行的表头，这通常用于分类复杂的列结构，例如一级表头和二级表头，使得用户能更好地理解和区分数据的不同维度。 2. **固定表头**：这是一个实用功能，当表格内容滚动...

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

    为了解决这个问题，开发者通常会采用“表格头部第一行下拉固定”的技术，使得在滚动查看表格内容时，表头始终保持可见，方便用户对照查阅。本文将详细介绍如何使用JavaScript实现这一功能。 首先，理解这个需求的...

    QT表格固定第一列，拖动时第一列不会遮挡

    标题"QT表格固定第一列，拖动时第一列不会遮挡"指向了一个特定的需求：在表格中固定第一列，以便用户在滚动或拖动表格时，关键的列头信息始终可见。这个功能对于处理大量数据或多个列的表格尤其有用，因为它可以提高...

    html 表头固定及列固定

    表头固定的目的是让表格的第一行（通常包含列名）在用户滚动页面时始终保持可见。这可以通过CSS的`position: fixed`属性来实现。以下是一个简单的示例： ```html th { position: sticky; top: 0; z-index: 1; ...

    jquery表头固定、列固定完美解决方案

    1. **表头固定**：当用户滚动表格时，插件会检测到滚动事件，然后将表头复制并定位在表格上方，使其看起来像是固定在屏幕顶部。这样，无论用户滚动多远，表头始终可见，方便查看列名。 2. **列固定**：对于列固定，...

    h5 固定表头及列头demo

    在本示例中，第一行和第一列的表头将被设置为`position: fixed`，确保它们在页面上始终可见。 具体实现时，可能需要创建两个独立的表格部分，一个用于固定表头，另一个用于显示实际数据。固定表头的表格通常会被...

    表头、第一列固定的表格

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

    移动web table固定表头第一列.rar

    我们可以使用绝对定位来固定表头和第一列。为`&lt;table&gt;`设置相对定位，以便于其内部元素可以使用绝对定位。然后，将`&lt;thead&gt;`设置为绝对定位，`top`值为0，使其始终位于顶部。对于固定第一列，可以创建一个新的`&lt;div&gt;...

    QTableView QTableWidget 复杂表头(多行表头) 、冻结、固定特定的行

    QT QTableView QTableWidget 复杂表头(多行表头) 、（冻结、固定特定的行），具体效果看博客： https://blog.csdn.net/xiezhongyuan07/article/details/82857631

    table表格固定行和列

    然而，当表格数据较多时，滚动浏览可能会导致表头或列宽不易辨识，这时就需要实现“固定行和列”的功能。这个功能使得用户在滚动查看大量数据时，表头和左侧的列始终保持可见，提高用户的阅读体验。 要实现`table...

    固定表头的使用

    当用户滚动页面时，表头的第一行和第一列会被赋予相对定位，使其在页面滚动时仍然保持在屏幕顶部。通过设置`z-index`，确保固定表头始终位于其他内容之上，而背景颜色和样式保持一致，以提供良好的视觉体验。 为了...

    HTML页面table表格固定行和列

    同时，我们需要确保表头的高度与实际表格的第一行高度一致，以保持视觉一致性。例如： ```html .fixed-header { position: fixed; top: 0; width: 100%; } &lt;!-- 表头内容 --&gt; &lt;!-- 表格主体内容 -...

    html table 固定表头和列

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

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