`

html中固定table 的表头 (IE)

htmlcss 
阅读更多
方法1 ： 
<html>
<head>
    <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='3' cellspacing='3'
            style='table-layout: auto'>
            <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>

方法2： 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Untitled Document</title>
<style>
        .td_relative   { 
          background-color:   #CCCCCC; 
          top                           :   expression(document.getElementById("diva").scrollTop-1); 
          position                 :   relative; 
          z-index                   :   1 
} 
    </style>
</head>

<body>
<div id="diva" style="width: 300px; overflow: auto;height: 200px;">
<table width="100%" border="1">
<tr >
    <td class="td_relative">sdfdf;</td>
    <td class="td_relative">&nbsp;</td>
    <td class="td_relative">&nbsp;</td>
    <td class="td_relative">&nbsp;</td>
    <td class="td_relative">&nbsp;</td>
    <td class="td_relative">&nbsp;</td>
    <td class="td_relative">&nbsp;</td>
    <td class="td_relative">&nbsp;</td>
    <td class="td_relative">&nbsp;</td>
    <td class="td_relative">&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>


方法3： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   
//Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 


<style> 
.fixed { 
position: relative; 
background: #ccc; 
} 
.scroll_layer { 
width: 200px; 
height: 80px; 
overflow-y: scroll; 
} 
</style> 

<div class="scroll_layer"> 
<table border="1" bordercolor="#0066ff" cellspacing="0" style="width:200px; border-collapse:collapse"> 
<tr> 
<td class="fixed">header1</td> 
<td class="fixed">header2</td> 
</tr> 
<tr> 
<td>body a</td> 
<td>body b</td> 
</tr> 
<tr> 
<td>body c</td> 
<td>body d</td> 
</tr> 
<tr> 
<td>body a</td> 
<td>body b</td> 
</tr> 
<tr> 
<td>body c</td> 
<td>body d</td> 
</tr> 
<tr> 
<td>body a</td> 
<td>body b</td> 
</tr> 
<tr> 
<td>body c</td> 
<td>body d</td> 
</tr> 
</table> 
</div>


参考：
http://topic.csdn.net/t/20060324/09/4636345.html
http://blog.donews.com/oofrank/archive/2006/11/04/1072197.aspx
http://topic.csdn.net/t/20051205/19/4439677.html
   
分享到：
| query 使用方法
评论
发表评论

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

相关推荐

    html table 固定表头和列

    在"html+table固定表头和列"的压缩包中，可能包含了一个实现这个功能的示例。运行`index.html`文件，可以查看实际效果。通常，它会结合HTML、CSS和可能的JavaScript来实现固定表头和列的功能。 五、兼容性和优化 ...

    基于jquery的table表头固定

    "基于jQuery的table表头固定"通常涉及到以下关键技术点： 1. **分离表头和主体**：首先，我们需要将HTML表格的thead部分与tbody部分分离，这样在进行滚动操作时，thead可以独立于tbody进行定位。 2. **CSS定位**：...

    基于jquery的固定html table表头/列头插件

    为解决这一问题，基于jQuery的固定html table表头/列头插件应运而生，例如本案例中的"jquery.fixedtable.js"。 jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画效果。在jQuery基础上...

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

    1. **固定表头（Fixed Header）**：表头固定的关键在于将 `thead` 元素从 `tbody` 中分离出来，并将其设置为绝对定位。当表格容器（通常是一个 `div`）滚动时，表头始终保持在视口顶部。可以使用以下代码实现： ```...

    div模拟table滚动时表头固定，兼容ie6

    标题“div模拟table滚动时表头固定，兼容ie6”正是针对这一需求，描述了如何使用div元素来模拟表格的滚动，并确保在滚动过程中表头能够固定显示，同时实现列宽的自动适配，使得表头边框与表体边框对齐。 在传统的...

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

    在这个特定的Demo中，开发者使用了这两种技术来实现一个功能，即在表格中固定表头和锁定左列，以便于用户在滚动查看长表格内容时，表头始终保持可见，左侧列也保持固定。这个功能对于数据密集型的网页应用尤其有用，...

    一个兼容IE、Chrome和Firfox的HTML固定表头例子

    标题中的“一个兼容IE、Chrome和Firefox的HTML固定表头例子”表明这是一个关于网页开发的示例，重点在于实现表格的表头在滚动时保持固定显示，以提供更好的用户阅读体验。这种技术通常用于大数据量的表格，使用户在...

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

    "js table固定表头,固定列,全浏览器兼容"这个主题就涉及到了这一关键功能的实现，特别是要确保在不同浏览器上，包括对老旧浏览器如IE8及以上的支持。 首先，固定表头（Fixed Header）是指当表格内容滚动时，表头...

    基于jquery的固定html table表头/列头插件 （加强版）

    基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。

    table表头滚定左右上下可拉动

    在网页设计中，"table表头滚定左右上下可拉动"是一种常见的功能需求，尤其是在处理大量数据时。这种功能使得用户在滚动表格内容时，表头始终保持可见，方便用户跟踪列对应的数据，提供了更好的用户体验。以下将详细...

    js表头固定,固定table标题行

    本话题将深入探讨“js表头固定”这一技术，主要关注如何使用JavaScript和jQuery来实现固定table标题行的功能。 首先，我们来看"jquery表头固定"。jQuery是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档...

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

    锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2...

    table内容出现滚动条和表头对齐问题

    在网页设计中，表格（Table）是一种常见的数据展示方式，特别是在处理大量结构化信息时。然而，当表格内容过多导致无法在单个视窗内完全显示时，滚动条就会出现，这时表头对齐问题就显得尤为重要。为了解决"table...

    解决页面表头重复出现的问题，bootstrap-table.js

    2375行加上this.$header.outerHeight() 判断

    左侧是表头的表格

    为了实现固定表头和多级表头，开发者可能利用了CSS定位（positioning）技术，如`position: fixed`，以及HTML的`&lt;thead&gt;`和`&lt;colgroup&gt;`元素来组织表头结构。JavaScript部分可能涉及到事件监听（如滚动事件），以实现...

    JS固定表头和左边列（最新源码）1.9

    若单元格宽度是固定的，可以在第3个参数(config)中指定 isFixedSize:true 修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tbTopLeft...

    纯CSS实现表头固定表格滚动条效果

    表格应该分为两部分：固定表头和可滚动的主体。可以这样编写： ```html &lt;table&gt; 列1 列2 &lt;!-- 更多列... --&gt; 数据1 数据2 &lt;!-- 更多行... --&gt; &lt;!-- 更多行... --&gt; &lt;/table&gt; ``` 接下来，...

    单行或多行复杂的固定(冻结)表头的完美解决方案第二版

    在JavaScript中，实现固定表头的方法通常包括创建额外的DOM元素来模拟固定表头，或者通过CSS定位和绝对定位来处理。这个插件可能采用了这样的策略，通过监听滚动事件，动态调整表头的位置，使其始终保持在可视区域内...

    CSS 固定表头和列

    对于更复杂的需求，可以使用JavaScript库，如jQuery DataTables或Bootstrap的Table插件，它们提供了更强大的功能，如排序、过滤和分页，同时也能很好地处理固定表头和列的问题。 此外，对于响应式设计，还需要考虑...

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

    前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码...

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