2021-04-23 实现表格的头部（两行）和左侧固定，粘顶效果

样式 position:sticky

此样式必须用到子元素才能生效，也就是thead的td内才行，而且只能生效一行。
我的thead有两行，所有只能在嵌套一个table，关于监听滚动事件，实现固定两行。实现的大佬可以评论区付一下大码，我实现不了只能用本办法啦。

 .wrap{
          height: 550px;
          overflow: auto;
          width: 80%;
      }
       tr td,th{
           margin: 0;
           padding: 0;
           width:110px;
           height: 60px;
           line-height: 60px;
           text-align: center;
       }
       .roomtable{
           font-size: 12px;
           width:1650px;
           color: #666;
       }
      thead th {
          width:110px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          font-weight: normal;
      }
      .thead-ul{
          position:-webkit-sticky;
          position: sticky;
          left:0;
          top: 0;
          z-index:2;
          background:#fff ;
          padding-bottom:3px ;
      }
      .top_left{
          position:-webkit-sticky;
          position: sticky;
          left:0;
          top: 0;
          z-index:3;
          background:#fff ;

      }
       .roomtable>thead tr:nth-child(2) th{
           height: 30px;
           line-height: 30px;

       }
       .roomtable tbody tr td:first-child{
           position:-webkit-sticky;
           position: sticky;
           left:0;
           z-index: 1;
           background-color: #fff;
       }
      .roomtable>tbody tr td:first-child{
          box-shadow: 0 0 1px #72b814;
          border-right-color:#72b814;
      }
      .roomtable tbody tr:nth-child(odd) td:first-child{
          position:-webkit-sticky;
          position: sticky;
          left:0;
          z-index: 1;
          background:#F4F4F4;
      }
      .roomtable>tbody tr:nth-child(odd){
          background:#F4F4F4;
      }
      table{
          border-top: 1px solid #f1f1f1;
          border-left: 1px solid #f1f1f1;
          border-collapse: collapse;
          box-shadow: 1px 1px 1px 10px #72b814;
      }
      td,th{
          border-bottom: 1px solid #ccc;
          border-right: 1px solid #ccc;
      }

        .roomtable .blue span, .roomtable .yellow span, .roomtable .gray span{
            display: inline-block;
            background-color:#4285f6;
            width: 85%;
            float: left;
            text-align: left;
            padding-left:3px;
            color: #fff;
            font-size: 14px;
        }
       .roomtable .yellow  span{
          background-color: #fea03f;
        }
       .roomtable .gray span{
           background-color: #a6a6a6;
       }
       .roomtable .blue span:first-child,.roomtable .yellow span:first-child,.roomtable .gray span:first-child{
           display: inline-block;
           width:9%;
           height:60px;
           background-color:#72b814;
           float: left;
       }

<div class="wrap">

  <table  class="roomtable" >
      <thead id="table-head" >
         <tr>
             <td class="thead-ul" colspan="15">
               <table>
                  <tr><th class="top_left">2020-10-04</th><th>11-04周三</th><th>11-05周四</th><th>11-06周五</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th><th>11-05周四</th><th>11-06周五</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th></tr>
                  <tr><th class="top_left">筛选房型</th><th>剩184间</th><th>剩184间</th><th>剩184间</th><th>剩184间</th><th>剩184间</th><th>剩184间</th><th></th><th>剩184间</th><th></th><th>剩184间</th><th></th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th></tr>
               </table>
             </td>
         </tr>
      </thead>
      <tbody  id="table-body">
         <tr><td>1</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
         <tr><td>2</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
         <tr><td>406</td><td class="blue"><span></span><span>123</span></td><td></td><td class="yellow"><span></span><span>123</span></td><td></td><td>肖新品</td><td></td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>剩184间</td><td></td></tr>
         <tr><td>306</td><td class="red">剩184间</td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td></tr>
         <tr><td>206</td><td>184间</td><td></td><td></td><td>剩184间</td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
         <tr><td>106</td><td></td><td>剩184间</td><td></td><td class="gray"><span></span><span>106</span></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>

         <tr><td>2101</td><td>剩184</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
         <tr><td>2</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
         <tr><td>3</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>

         <tr><td>3</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
      </tbody>
  </table>
</div>

最终效果图：