用纯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>