table锁定列的一个方法.及琢磨思路

         div { 
            width: 600px; 
            overflow-x:scroll;  
            margin-left:5em; 
            border:1px solid red;
        }
        .headcol {
            position:absolute; 
            width:5em; 
            background-color:green;
            left:0;
            top:auto;  
        }
        .long { background:yellow; letter-spacing:1em; }

这是从http://stackoverflow.com找到一个一链接,删除多余的css,加上色就是上图。

原理就是:

td加上 absolute,它会脱离table的文档流,不再占位。而table左边加上margin,空出td的位置 来。td的定位还是在div内。所以它就在那个绿色margin中了。

最最重要的是div不能加上relative.否则绿色的锁定列就到div里而去了。它就会随着滚动而滚动。

现成给body加上padding:20px,会发现绿黄之间有了间隔。这是因为absolute元素向上找它的相对位置时,直接找到body元素上。absolute元素不考虑padding,而div(红框)整体右移了。

这样,要让绿色不顶着左侧,要加两层div.  下面代码正常了。

<div class='out'><div class='in'><table>
body{
    padding:20px;
}     
div.out{
    position:relative;
}
div.in { 
            width: 600px; 
            overflow-x:scroll;  
            margin-left:5em; 
            border:1px solid red;
 
        }
 
        .headcol {
            position:absolute; 
            width:5em; 
            background-color:green;
            left:0;
            top:auto;  
        }
        .long { background:yellow; letter-spacing:1em; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏進无尽的文章

什么才是优秀的网站用户界面设计

16420
来自专栏一个会写诗的程序员的博客

服务网格 Pattern: Service Mesh

自从几十年前首次引入以来,我们了解到分布式系统能够实现我们之前甚至无法思考的用例,但它们也会引入各种新问题。

14520
来自专栏知道一点点

20种新颖的按钮风格和效果【附源码】

Codrops 给我们分享了一组新鲜的按钮样式和效果的集合。它们中的大部分效果都使用了 CSS3 过渡和伪元素,他们都有一个共同点,那就是都具有简单性,没有太多...

16810
来自专栏AhDung

慎用Assembly.LoadFile()和Assembly.LoadFrom()

经测这俩方法会锁住文件,导致程序运行期间无法对load过的程序集文件进行更名/删除/覆盖等等操作,考虑用Assembly.Load()文件字节组替代:

40840
来自专栏李蔚蓬的专栏

自定义控件基础 之 3.4 ViewGroup的测量 & 3.5 ViewGroup的绘制

之前分析中说了,ViewGroup会去管理其子View,其中一个管理项目就是负责子View的显示大小。当ViewGroup的大小为wrap_content时,V...

11720
来自专栏ios 技术积累

UIProgressView 当前进度显示圆角

也就是把 UIProgressView的trackTintColor设置为透明。假如进度条没有填满是效果是这样的

83620
来自专栏進无尽的文章

益思维-早期苹果员工胸牌背面写的11条“成功法则”

早期苹果员工胸牌背面写的11条“成功法则”这个胸牌的背面写着11条成功法则,其中每一条文字都充满了正能量。从中我们可以看到一些触动人心的感觉。

9620
来自专栏数据库新发现

思科CEO钱伯斯:我非常尊敬华为

--------------------------------------------------------------------------------...

31810
来自专栏ios 技术积累

TableViewCell和百度地图手势冲突

如果要实现这个功能,出现的问题就是缩放地图不灵敏,上下拖动TableView就会跟着动 解决办法

31220
来自专栏数据库新发现

第十三届搞笑诺贝尔奖(IgNobel)新鲜出炉

第十三届搞笑诺贝尔奖(IgNobel)新鲜出炉 中广网 10月04日 09:48

19030

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励