⽤纯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" >
<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" >
<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 >
<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>
css固定定位<th class="div_ta60">单位</th>
<th class="div_ta80">⼊库数量</th>
<th class="div_ta160">⼯单编号</th>
<th class="div_ta120">唛头</th>
</tbody>
</table>
<!---------------------------表格4结束------------------------------->
/div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。