用纯css打造表格第一行和前几列锁定

一个行列固定的表格，是由4个表格组成；

笔记：

1、overflow:定义超出元素框的内容如何呈现：

visible:默认值，内容不删减，并且出现在元素框之外；

hidden:超出元素框的内容不可见；

scroll:加入滚动条，让超出部门在元素框内可见；

auto:如果内容超出元素框，则加入滚动条，否则不加；

inherit:继承父元素的overflow属性；

2、position：规定元素位置；

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative：生成相对定位的元素，相对于其正常位置进行定位。

static：默认值。没有定位，元素出现在正常的流中。

sticky：基于用户滚动来定位；它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置

一行只能出现一个relative或者sticky

3、z-index:元素叠加的顺序；仅能在定位元素上生效position

数值越大越在上面;

/*这是超过文本两行，超出文本框就会显示省略号*/
.hid {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;width: 200px;
}
/*显示的容器*/
.contain {border: 1px solid #cdd;height: 426px;position: relative;overflow: scroll;
}tr {border: 1px solid #cdd;height: 30px;text-align: center;
}th, td {border: 1px solid #cdd;height: 30px;text-align: center;width: 200px;
}.div_ta60 {width: 60px;
}
/*这是表格样式*/
.tb1 {position: fixed;z-index: 999;width: 621px;text-align: center;
}.tb2 {position: sticky;left: 621px;width: 2551px;z-index: 998;top: 0px;text-align: center;
}.tb3 {left: 0px;position: sticky;z-index: 888;width: 621px;background-color: whitesmoke;text-align: center;float: left;
}.tb4 {left: 621px;width: 2551px;position: absolute;z-index: 887;background-color: whitesmoke;text-align: center;
}

<div class="contain"><!-------------------------表格一开始-------------------------><table class="tb1" id="MyTable1" cellspacing="0" cellpadding="0" border="0"><thead><tr class="btn-primary" style="font-size:15px;color:#000000;"><th class="div_ta60">序号</th><th class="div_ta160">需求订单</th><th>品号</th><th>品名</th></tr></thead></table><!----------------------表格一结束--------------------------------><!----------------------表格二开始-------------------------------><table class="tb2" cellspacing="0" id="MyTable2" cellpadding="0" border="0"><thead><tr class="btn-primary" style="font-size:15px;color:#000000;"><th class="div_ta80">订单数量</th><th class="div_ta60">单位</th><th class="div_ta80">入库数量</th><th class="div_ta160">工单编号</th><th class="div_ta120">唛头</th></tr></tr></table><!----------------------表格二结束--------------------------------><!-------------------------表格三开始------------------------------><table class="tb3" cellspacing="0" id="MyTable3" cellpadding="0" border="0"><tr style="font-size:15px;color:#000000;"><th class="div_ta80">订单数量</th><th class="div_ta60">单位</th><th class="div_ta80">入库数量</th><th class="div_ta160">工单编号</th><th class="div_ta120">唛头</th></tr></table><!-------------------------表格三结束--------------------------------><!---------------------------表格4开始------------------------------><table class="tb4" cellspacing="0" id="MyTable4" cellpadding="0" border="0"><tbody><th class="div_ta80">订单数量</th><th class="div_ta60">单位</th><th class="div_ta80">入库数量</th><th class="div_ta160">工单编号</th><th class="div_ta120">唛头</th></tbody></table><!---------------------------表格4结束------------------------------->/div>

用纯css打造表格第一行和前几列锁定相关推荐

html图片倒角,CSS实例：纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
html银白色,纯CSS打造银色MacBookAir（二）_html/css_WEB-ITnose
上一篇:<纯CSS打造银色MacBook Air(一)> 写在前面上一篇我们谈了<纯CSS打造银色MacBook Air(一)>,今天我们接着谈. First注:如果图片过大 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
纯CSS打造的Family tree（族谱）
Family tree(族谱),也称家谱,用来记录家族世系繁衍辈份关系.本文结合实例,不借助任何js脚本,使用纯CSS打造一个漂亮的Family tree(族谱),也可以应用的企业组织架构图中. 查看 ...
css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序心急的同学,先看效果,我放在codepen上. ...
精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
纯css打造超能陆战队--大白
纯css打造超能陆战队–大白要点思路要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger ...
css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力,但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦.本教程包含各种形 ...
html制作多个tab页面,纯CSS打造双层Tab
写代码前的准备一般来说,使用纯CSS实现Tab页面效果的常用方式是a标签和:target结合,但是这样实现有一个强迫症的地方:由于是使用a标签把页面"链接"到某个指定ID的元素上 ...
纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...

用纯css打造表格第一行和前几列锁定

用纯css打造表格第一行和前几列锁定相关推荐

最新文章

热门文章