`
少女杀手
  • 浏览: 131900 次
  • 性别: Icon_minigender_1
  • 来自: 约旦河西岸
社区版块
存档分类
最新评论

固定table标题头、标题列（兼容多种浏览器）

    博客分类：
  • HTML
浏览器ChromeOperaSafariXHTML 
阅读更多
最近在做一个固定表格标题头和标题列的Demo，在网上好找，不是代码太多，就是不兼容浏览器，最后在网上终于找到一个代码少的，也兼容浏览器的，按照他的思路，最后终于弄出一个简单点的Demo。反正代码量是很少了，在IE8、火狐、Opera、Chrome、Safari下都没有问题。

左侧固定多少列可以自己手动添加

有不足之处，欢迎大家帮我改正！




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>固定标题列、标题头table</title>
<style>
table{border-collapse:collapse;border-spacing:0px; width:100%; border:#000 solid 0px;}
table td{border:1px solid #000;height:25px; text-align:center; border-left:0px;}
table th{ background:#edd3d4; color:#a10333; border:#000 solid 1px; white-space:nowrap; height:21px; border-top:0px;border-left:0px;}

        .t_left{width:30%; height:auto; float:left;border-top:1px solid #000;border-left:1px solid #000;}

        /*t_r_content和cl_freeze高度相差20px， 高度为外观显示高度，可根据情况调整*/
.t_r_content{width:100%; height:220px; background:#fff; overflow:auto;}
.cl_freeze{height:200px;overflow:hidden; width:100%;}
/* width 调整左边标题列宽度（左侧外观显示宽度）; 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/

/* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */
          /* 如果显示不正常，调整 t_r的width 使其和t_left的width之和小于100%；等于100%时会有问题*/
.t_r{width:69.5%; height:auto; float:left;border-top:1px solid #000; border-right:#000 solid 1px;}
   
.t_r table{width:1700px;}
        .t_r_title{width:1720px;}/*宽度比 t_r table 大20px （至少大20，小了滚动条滑到右侧显示有问题）*/
        .t_r_t{width:100%; overflow:hidden;}
.bordertop{ border-top:0px;}
</style>
<script>
  function aa(){
     var a=document.getElementById("t_r_content").scrollTop;
     var b=document.getElementById("t_r_content").scrollLeft;
      document.getElementById("cl_freeze").scrollTop=a;
      document.getElementById("t_r_t").scrollLeft=b;
  }
</script>
</head>

<body>
<div style="width:100%">
<div class="t_left">
      <div style="width:100%;">
       <table>
           <tr>
              <th style="width:40%">账号</th>
              <th style="width:60%">姓名</th>
           </tr>
       </table>
       </div>
    <div class="cl_freeze" id="cl_freeze">
        <table>
                <tr>
                  <td style="width:40%" class="bordertop">1</td>
                  <td style="width:60%" class="bordertop">1</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>2</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>3</td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>5</td>
                  <td>5</td>
                </tr>
                <tr>
                  <td>6</td>
                  <td>6</td>
                </tr>
                <tr>
                  <td>7</td>
                  <td>7</td>
                </tr>
                <tr>
                  <td>8</td>
                  <td>8</td>
                </tr>
                <tr>
                  <td>9</td>
                  <td>9</td>
                </tr>
                <tr>
                  <td>10</td>
                  <td>10</td>
                </tr>
                <tr>
                  <td>11</td>
                  <td>11</td>
                </tr>
                <tr>
                  <td>12</td>
                  <td>12</td>
                </tr>
                <tr>
                  <td>13</td>
                  <td>13</td>
                </tr>
                <tr>
                  <td>14</td>
                  <td>14</td>
                </tr>
                <tr>
                  <td>15</td>
                  <td>15</td>
                </tr>
                <tr>
                  <td>16</td>
                  <td>16</td>
                </tr>
                <tr>
                  <td>17</td>
                  <td>17</td>
                </tr>
                <tr>
                  <td>18</td>
                  <td>18</td>
                </tr>
                <tr>
                  <td>19</td>
                  <td>19</td>
                </tr>
                <tr>
                  <td>20</td>
                  <td>20</td>
                </tr>
        </table>
    </div>
</div>

<div class="t_r">
    <div class="t_r_t" id="t_r_t">
        <div class="t_r_title">
            <table>
             <tr>
               <th width="10%">字段A</th>
               <th width="20%">字段B</th>
               <th width="10%">字段C</th>
               <th width="20%">字段D</th>
               <th width="20%">字段E</th>
               <th width="20%">字段F</th>
             </tr>
            </table>
        </div>
    </div>
  <div class="t_r_content" id="t_r_content" onscroll="aa()">
      <table>
        <tr>
          <td width="10%" class="bordertop">1</td>
          <td width="20%" class="bordertop">1</td>
          <td width="10%" class="bordertop">1</td>
          <td width="20%" class="bordertop">1</td>
          <td width="20%" class="bordertop">1</td>
          <td width="20%" class="bordertop">1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
        <tr>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>7</td>
          <td>7</td>
          <td>7</td>
          <td>7</td>
          <td>7</td>
        </tr>
        <tr>
          <td>8</td>
          <td>8</td>
          <td>8</td>
          <td>8</td>
          <td>8</td>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
        </tr>
        <tr>
          <td>10</td>
          <td>10</td>
          <td>10</td>
          <td>10</td>
          <td>10</td>
          <td>10</td>
        </tr>
        <tr>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td>12</td>
          <td>12</td>
          <td>12</td>
          <td>12</td>
          <td>12</td>
          <td>12</td>
        </tr>
        <tr>
          <td>13</td>
          <td>13</td>
          <td>13</td>
          <td>13</td>
          <td>13</td>
          <td>13</td>
        </tr>
        <tr>
          <td>14</td>
          <td>14</td>
          <td>14</td>
          <td>14</td>
          <td>14</td>
          <td>14</td>
        </tr>
        <tr>
          <td>15</td>
          <td>15</td>
          <td>15</td>
          <td>15</td>
          <td>15</td>
          <td>15</td>
        </tr>
        <tr>
          <td>16</td>
          <td>16</td>
          <td>16</td>
          <td>16</td>
          <td>16</td>
          <td>16</td>
        </tr>
        <tr>
          <td>17</td>
          <td>17</td>
          <td>17</td>
          <td>17</td>
          <td>17</td>
          <td>17</td>
        </tr>
        <tr>
          <td>18</td>
          <td>18</td>
          <td>18</td>
          <td>18</td>
          <td>18</td>
          <td>18</td>
        </tr>
        <tr>
          <td>19</td>
          <td>19</td>
          <td>19</td>
          <td>19</td>
          <td>19</td>
          <td>19</td>
        </tr>
        <tr>
          <td>20</td>
          <td>20</td>
          <td>20</td>
          <td>20</td>
          <td>20</td>
          <td>20</td>
        </tr>
      </table>
  </div>
</div> </div>
</body>
</html>
  • 大小: 25.4 KB
2
顶
0
踩
分享到：
| 将表中的数据生成插入语句
评论
2 楼 少女杀手 2009-08-14  
Vanish 写道
IE6下挂了


现在没有问题了！
1 楼 Vanish 2009-08-14  
IE6下挂了
发表评论

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

相关推荐

    asp网页表头固定解决

    - **兼容性测试**：在多种浏览器和设备上进行测试，确保效果一致。 压缩包文件中的“表头固定解决”可能包含了实现这一功能的HTML、CSS、JavaScript代码，以及相关的说明文档。开发者可以通过研究这个例子，学习并...

    table表头固定

    实现“table表头固定”的技术方案多种多样，其中一种常见的方法是利用CSS样式，特别是定位（positioning）属性。例如，可以将`thead`设置为`position: fixed`，这样当用户滚动页面时，表头会保持在屏幕的特定位置。...

    表头浮动（table header fixed）

    当用户滚动页面时，表头始终保持可见，以便用户可以随时参考列标题，理解表格中的数据。这种效果提高了用户体验，特别是对于含有大量数据的表格，用户无需一直回到顶部查看列名。 实现表头浮动的技术主要分为以下几...

    datatables固定头与滚动条适配文件

    在进行以上步骤的同时，还需要注意浏览器的兼容性和性能优化，因为固定表头和滚动条可能会增加页面的计算和渲染负担。通过适当的CSS优化和使用现代布局技术（如Flexbox或Grid），可以提高性能并减少潜在的兼容性问题...

    实现固定表头表格的总结

    这种功能可以提供更好的用户体验，使用户在浏览大量数据时仍能保持对列标题的清晰理解。本篇文章将重点讲解如何实现这一功能，并通过示例代码进行详细解析。 首先，我们来看“grid_js+table.htm”文件，这个文件...

    jQuery自动固定表头插件freezeheader.js

    3. **兼容性测试**：在多种浏览器环境下测试插件的兼容性，包括但不限于Chrome、Firefox、Safari、Edge和Internet Explorer。 4. **文档和更新**：关注插件的官方文档，及时获取更新和新功能，以便保持应用的最新...

    jquery表头固定

    "jquery表头固定"就是解决这一问题的技术方案，它允许在页面滚动时保持表格的列标题（表头）始终可见，提高用户交互性和数据可读性。 `freezeheader.js` 是一个基于 jQuery 的轻量级插件，专门设计用于实现固定表头...

    js实现表格部分固定

    为了解决这个问题，我们可以利用JavaScript（js）来实现表格部分固定的特性，保持横向标题行和纵向标题列在页面滚动时始终可见。以下是一些关键知识点和实现步骤： 1. **固定表头（Fixed Header）** - 使用CSS定位...

    sorttable-move.rar

    2. **DragTable.js**：这个文件可能实现了表格行或列的拖放功能，使得用户可以通过鼠标拖动来重新排列表格的结构。DragTable.js 可能包含事件处理、元素位置跟踪和DOM操作的代码，用于提供流畅的拖放体验。 3. **...

    Responsive-Table

    - 测试多种设备和浏览器，确保兼容性和一致性。 总结来说，响应式表格设计涉及HTML结构、CSS布局和JavaScript交互，需要开发者具备跨平台和设备的视野，以提供优质的用户体验。随着移动设备的普及，掌握响应式表格...

    类似Excel的表格

    它支持多种数据源，如JSON、CSV，并且兼容各种浏览器环境。以下是一些Handsontable的关键特性： 1. **数据绑定**：Handsontable可以绑定到JavaScript数组或对象，使得数据的增删改查变得简单。 2. **单元格类型**：...

    前端项目真实样式清除文件

    - **基础字体设置**：文档中定义了默认字体为“微软雅黑”，并兼容多种其他字体类型，如“宋体”、“思源黑体CN”等。 - **链接样式**：`&lt;a&gt;`标签的`text-decoration`被设为`none`，并且初始颜色设为`#333`，当鼠标...

    2022年大一下网页期末作业【二十四节气】纯html、css制作

    6. **响应式设计与浏览器兼容性**：使网页能够在不同设备上良好显示的方法，以及确保网页在各种浏览器中都能正常工作的技巧。 ### 二、HTML静态网页设计 HTML（HyperText Markup Language）是一种用于创建网页的...

    HTML标记快速查询表

    - `&lt;title&gt;`：设置网页的标题，在浏览器标签页中显示。 - `&lt;body&gt;`：文档主体部分，包含可见的内容。 - `&lt;!DOCTYPE&gt;`：声明文档遵循的HTML版本或DTD（文档类型定义）。 - `&lt;meta&gt;`：定义文档的元信息，如字符...

    html本书的标签-自己整理

    - **用途**：用于显示具有固定列数的数据。表格的每一行由 `&lt;tr&gt;` 定义，每列由 `&lt;td&gt;` 或 `&lt;th&gt;`（表头单元格）定义。 - **示例**： ```html &lt;table&gt; 标题1 标题2 数据1 数据2 &lt;/table&gt; ``` 以上...

    网页设计核心软件教程CS3版—Dreamweaver.ppt

    标记整个文档的开始和结束，包含文档元数据，如标题，而则容纳所有显示在浏览器中的内容。在编写HTML时，应注意标签的规范使用，如大小写不敏感，标签名与尖括号间不应有空格，以及正确嵌套标签。 常见的HTML标签...

    网页设计(1).docx

    `&lt;table&gt;` 和 `&lt;/table&gt;` 用于创建表格。 3. **表格背景**：在HTML中，可以设置表格的背景为纯色或图片。图片格式可以是GIF、JPEG或PNG等多种，不仅限于GIF和JPEG。 4. **Dreamweaver8 库文件扩展名**：...

    WEB标准设计 pdf

    - **兼容性和跨平台性**：严格的语法要求有助于确保文档能在多种设备和浏览器上正确显示。 - **减少错误**：严格的规范有助于开发者编写无误的代码，降低出现错误的可能性。 #### 三、CSS：控制网页样式 ##### 3.1...

    网页制作-html 基础教程

    它通过一系列预定义的标记（tag）来标注文本、图片、表格等内容，告诉浏览器如何显示这些元素。HTML文件是以.htm或.html为扩展名的文本文件，可以通过任何文本编辑器编写，如记事本。 #### 重要知识点： - **HTML...

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