html中固定table 的表头 (IE)

最新推荐文章于 2022-07-18 09:09:47 发布
最新推荐文章于 2022-07-18 09:09:47 发布
阅读量596 收藏
点赞数
分类专栏： css html 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mll881128/article/details/84471737
版权
css 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏
方法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"> </td>
    <td class="td_relative"> </td>
    <td class="td_relative"> </td>
    <td class="td_relative"> </td>
    <td class="td_relative"> </td>
    <td class="td_relative"> </td>
    <td class="td_relative"> </td>
    <td class="td_relative"> </td>
    <td class="td_relative"> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </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
mll881128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现html table表头固定（css +html）
qq_42977016的博客
12-17 1146
实现html table表头固定（css +html） 实现table表头固定的步骤 实现思路为： 1，两个table一个为头部，一个为表单部分。 2，利用colgroup 3，利用css来给滚动条留出位置 #本文非完全原创，思想取自各大博客，框架等。由于本人没办法找到博客地址，此部不贴原文链接。 先上代码! <div class="wrapbox"> <div cla...
html table 固定表头和列
09-21
在"html+table固定表头和列"的压缩包中，可能包含了一个实现这个功能的示例。运行`index.html`文件，可以查看实际效果。通常，它会结合HTML、CSS和可能的JavaScript来实现固定表头和列的功能。 五、兼容性和优化 ...
html table绝对定位不出现滚动条,2018-12-27 绝对定位 固定定位 元素的层级 背景 电驴导航条 背景偏移与定位 按钮练习 简写背景属性 表格...
weixin_34898216的博客
06-10 354
绝对定位绝对定位指使元素相当于html元素或离他最近的祖先元素进行的定位当position设置为absolute时，开启绝对定位特点：绝对定位会使元素完全脱离文本流绝对定位的块元素的宽度会被其内容撑开绝对定位会使行内元素变成块元素固定定位固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚蛋网页时，固定元素会在屏幕上保持不动当position设置为fixed时开启固定定位1、元素的层级:如果定位元...
IE,表头固定
weixin_34226182的博客
02-11 134
<html> <head> <title>表头固定</title> <style type="text/css"> /*表头样式*/ .scll { position: relative; top: expression(this.offsetParent.scrollTop); backg...
固定表头最简单的方法（仅IE有效）
02-07
固定表头最简单的方法（仅IE有效） 不需要使用top:[removed]this.offsetParent.scrollTop - 1);样式
适用于IE的固定表头和列的表格样式[CSS]
weixin_34087307的博客
04-27 265
先给个图，如下： 解决如下需求：1. 当数据记录多的时候不希望分页，或者希望一页显示多一些数据的时候，表格出现纵向滚动条，要求表头不随着滚动条的滚动而滚动。2. 当数据列比较多的时候，出现横向滚动条，要求序号列、操作列等相关的列不随着横向滚动条滚动而滚动。 本文给出的解决办法仅适用于IE，支持IE6/7/8，是CSS的，没有啥好说的，直接给出列出代码并提供下载：FixTable.ra...
Jquery table固定表头,固定列,全浏览器兼容
11-19
1. **固定表头（Fixed Header）**：表头固定的关键在于将 `thead` 元素从 `tbody` 中分离出来，并将其设置为绝对定位。当表格容器（通常是一个 `div`）滚动时，表头始终保持在视口顶部。可以使用以下代码实现： ```...
Angular8 实现table表格表头固定效果
10-15
在Angular8应用中，实现table表格的表头固定效果是一个常见的需求，特别是在处理大量数据时，保持表头可见可以帮助用户更好地理解数据。本教程将详细讲解如何在Angular8中实现这一功能，包括表头固定、内部滚动条...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class=table_box_big> <div class=table_box> <table> <th><div>标题一</div></th> <th><div>...
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
通过table的用来锁定表头，内置封装的JS控制锁定列，在页面中直接调用JS方法设定。
一个兼容IE、Chrome和Firfox的HTML固定表头例子
03-28
NULL 博文链接：https://sheng.iteye.com/blog/1199433
jquery 锁定表头和固定列(Fixed table head and columns)
11-27
前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪念。 支持IE6+，FF3.6+，Opera9+，Chrome9+ 来源： http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html
两个table实现固定表头拖动时仅限表体移动
09-25
在网页设计中，实现固定表头以便在滚动时保持可见是一项常见的需求，特别是在处理大量数据时，固定表头可以提供更好的用户体验。标题“两个table实现固定表头拖动时仅限表体移动”描述了一种利用两个表格来完成这一...
jQuery table插件锁定表头和首列
ICode联盟
07-18 218
无法兼容所有浏览器，理论上支持H5的浏览器应该都可以（见谅）。在IE8（H5的效果无效）、IE11、Edge、Chrome62、firefox57、360浏览器8.1（内核45）内测试均正常，其他浏览器没装就没再查看。
完美兼容IE_Opera_Firefox等主流浏览器的锁定表格的 表头以及表头列
03-19 8489
锁定 表格的表头 和 列   终于 被我 写出来了，哇哈哈~~~~~~  ， 心情大好....   共享下 吧。   希望 看到的该文的 时候给予评价， 俗话说 吃水不忘挖井人啊。  要是朋友你 通过该文中的共享代码 测试成功了，记得 帮兄弟我 把 该文  帮忙顶起！！！！ 转载请标明出自：http://blog.csdn.net/SongYanJun2011
表格【table标签】固定表头小技巧
vscode_js的博客
08-23 5981
近期开发一个小项目，由于项目本身比较小巧，所以也没考虑使用ui框架，项目纯手写html+css+js，由于页面的表格数据后台没有返回分页数据，导致整个表格集体向上滑动，故产品提出将table表格表头固定的小需求 尝试了很多种方法，thead不能单独脱离出来，否则整个table就瘫痪了，在无意中发现了一个合并表头的小技巧，完美解决当前的这个表头固定的小需求，下面让我们一起看一下展示效果吧： ...
IE的表头固定/表头不动（使用expression）
weixin_34249367的博客
06-16 521
本文主要介绍在IE浏览器中，实现表头固定的一种方法。这种方法使用到了 IE 浏览器特有的 expression 方法。 表头固定DEMO1 主要代码： <style type="text/css"> .fixedHeaderTr { position:relative; //...
HTML table 表头固定
最新发布
05-05
要固定 HTML 表格的表头，可以使用 CSS 的 `position: sticky` 属性。这个属性可以让元素在滚动到某个位置时固定在页面上。具体实现步骤如下： 1. 设置表格的 `thead` 元素为固定定位： ```css thead { position:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值