css样式，锁定表头，只在IE浏览器下可以使用，没有兼容性

最新推荐文章于 2021-08-03 18:18:59 发布
最新推荐文章于 2021-08-03 18:18:59 发布
阅读量939 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruanhao1203/article/details/37831567
版权

css样式，锁定表头，只在IE浏览器下可以使用，没有兼容性


这里需要注意table的宽度和高度，需要根据行数和列数乘以相应的宽高得出，总之如果没有设定宽高的话就惨了，数据行列多的时候就挤在一起了

，这个我没有在具体项目中用过，不过还好，如果想有兼容性的话，可以看我的文章：js方式锁定表头

<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;
        }
		td{
			width:120px;
		}
    </style>
</head>
<body>
   <div id="scrollDiv" style="width: 1000px; overflow: auto; cursor: default; display: inline;
        position: absolute; height: 500px;">
        <table id='accountTable' width='2000' height='700' cellpadding='0' cellspacing='0'
            style='table-layout: auto' bordercolor='lightgrey'>
            <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>
					<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>


全栈编程网
关注
IE浏览器单独写CSS样式的几种方法
09-25
主要介绍了IE浏览器单独写CSS样式的几种方法,本文总结了IE hacks、条件注释 CSS、条件注释 html 标签3种方法,需要的朋友可以参考下
如何让IE加载特殊的CSS样式
bangzi3783的博客
07-12 162
很有用的哦，所以翻译过来了，可能不是很准确，不过应该与原文没有太大的出入。原文地址：http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ 如果你读了这篇文章，你会觉得IE浏览器很是让人头疼。但是如果你是一名优秀的前端开发人员的话，你必须得解决这个问题,我认为你可以用很多方法去解决这个问题，当然，hack除外，如果使用了ha...
不使用 JavaScript，仅在 CSS 中实现为 IE10 / IE11 单独设置样式（IE11 不支持 flex: 1； / ES6，IE11 之前不支持 Swiper）
Lyrelion的博客
08-03 862
1. 为 IE10 / IE11 单独设置样式（exp：文字渐变色） 2. IE11 不支持 flex: 1（exp：行政办公） 3. IE11 中 不可以使用 es6（exp：防抖定时器） 4. IE11 之前的版本不兼容swiper
针对IE浏览器单独写CSS样式的几种方法
热门推荐
晨丶曦_的博客
04-07 2万+
IE浏览器单独写CSS样式的几种方法1.CSS Hack 举例如下：.box { background: gray; /* 基本的 */ background: pink\9; /* IE 8 及低于IE8版本 */ *background: green; /* IE 7 及低于IE7版本 */ _background: blue; /* IE 6 */ }另外
IE的表头固定/表头不动（使用expression）
weixin_34249367的博客
06-16 538
本文主要介绍在IE浏览器中，实现表头固定的一种方法。这种方法使用到了 IE 浏览器特有的 expression 方法。 表头固定DEMO1 主要代码： <style type="text/css"> .fixedHeaderTr { position:relative; //...
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
在这个特定的Demo中，开发者使用了这两种技术来实现一个功能，即在表格中固定表头和锁定左列，以便于用户在滚动查看长表格内容时，表头始终保持可见，左侧列也保持固定。这个功能对于数据密集型的网页应用尤其有用，...
html锁定表头冻结行列兼容多浏览器
07-13
然而，由于不同浏览器对CSS的解析和执行方式存在差异，我们需要编写特定的样式来确保在各个浏览器上的兼容性。 对于IE8，由于其不支持CSS3的一些特性，如：`position: sticky`，我们需要使用`position: fixed`结合...
CSS样式表教程：浏览器默认样式
09-27
然而，需要注意的是，过度的样式重置可能会导致一些原本可用的浏览器默认行为丧失，因此在编写重置样式时，要权衡兼容性和功能性的需求。此外，随着CSS规范的更新和浏览器的改进，某些默认样式差异正在逐渐减少，...
解决EXT.NET在IE9下中文太小Default.css
09-25
这个问题通常是由于浏览器的兼容性问题或是EXT.NET的CSS样式与IE9的渲染机制不匹配导致的。 解决EXT.NET在IE9下中文显示过小的问题，主要是调整页面中的CSS样式，特别是与字体大小相关的设置。以下是一些关键的CSS...
一个兼容IE、Chrome和Firfox的HTML固定表头例子
03-28
在这个示例中，它可能包含了让表头固定显示的CSS规则，例如使用定位（positioning）属性、相对或绝对定位，以及可能的媒体查询（media queries）来确保在不同屏幕尺寸下的兼容性。 2. `index.html`：这是HTML...
固定表头最简单的方法（仅IE有效）
02-07
固定表头最简单的方法（仅IE有效） 不需要使用top:[removed]this.offsetParent.scrollTop - 1);样式
为ie和chrome单独设置样式的方法
09-25
如何单独为ie和chrome设置样式，做浏览器兼容的朋友一定要知道的，下面是将经验与大家分享下
Jquery table固定表头,固定列,全浏览器兼容
11-19
Jquery table固定表头,固定列,全浏览器兼容 Jquery table固定表头,固定列,全浏览器兼容
IE,表头固定
weixin_34226182的博客
02-11 137
<html> <head> <title>表头固定</title> <style type="text/css"> /*表头样式*/ .scll { position: relative; top: expression(this.offsetParent.scrollTop); backg...
table表头固定 ,兼容IE.Firefox,google,360等等
蓝缘
04-10 6513
固定表头 body{ overflow:hidden;}/*让body不出现滚动条*/ table { background-color: #FFFFFF; border-collapse: collapse; border-left: 1px solid #000; border-spacing: 1px; border-top: 1px solid #
适用于IE的固定表头和列的表格样式[CSS]
weixin_34087307的博客
04-27 270
先给个图，如下： 解决如下需求：1. 当数据记录多的时候不希望分页，或者希望一页显示多一些数据的时候，表格出现纵向滚动条，要求表头不随着滚动条的滚动而滚动。2. 当数据列比较多的时候，出现横向滚动条，要求序号列、操作列等相关的列不随着横向滚动条滚动而滚动。 本文给出的解决办法仅适用于IE，支持IE6/7/8，是CSS的，没有啥好说的，直接给出列出代码并提供下载：FixTable.ra...
css 实现的TABLE 固定行列(IE)
f0rwin的专栏
11-21 4741
html>head> style type="text/css"> body,table, td, a { font:9pt; } /*重点：固定行头样式*/.scrollRowThead {     position: relative;      left: expression(thi
如何只在IE上加载CSS样式表
weixin_33717117的博客
02-18 676
前言：IE一直是特殊的一个浏览器，我们可以使用一些方法来指定样式表只在IE浏览器下被加载。 IE9以及低于IE9版本 :可以使用条件注释语句来加载特定于ie的样式表。如下所示，使用外部样式表。 &lt;!--[if IE]&gt; &lt;link rel="stylesheet" type="text/css" href="all-...
解决CSS+Div在IE浏览器中的兼容问题
"关于CSS+Div在IE中的兼容性问题及解决方法" 在Web开发中，CSS（层叠样式表）和Div元素是构建现代网页布局的基础。然而，由于不同的浏览器，尤其是Internet Explorer（IE）的不同版本对CSS的支持程度不一，这给...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值