title: table header colspan and rowspan fix location scrollable
body: <p>the "LINE (n)" header is not fix like "SENSOR (n)" Header.
  how to fix this?</p>
  
  <pre><code>.table-scroll {
      position: relative;
      width:100%;
      z-index: 1;
      margin: auto;
      overflow: scroll;
      height: 55vh;
  }
  .table-scroll table {
      width: 100%;
      min-width: 100px;
      margin: auto;
      border-collapse: separate;
      border-spacing: 0;
  }
  .table-wrap {
      position: relative;
  }
  .table-scroll th,
  .table-scroll td {
      padding: 5px 10px;
      border: 1px solid #000;
      #background: #fff;
      vertical-align: top;
      text-align: center;
  }
  .table-scroll thead th {
      background: #333;
      color: #fff;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
  }
  th.sticky {
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      z-index: 2;
      background: #ccc;
  }
  thead th.sticky {
      z-index: 5;
  }
  </code></pre>
  
  <p>when i scroll left and right the "LINE (n)" header working fine,
  but when i scroll up and down the "LINE (n)" header will move. how to fix this?</p>
  
  <p><a href="https://codepen.io/anon/pen/pqPOyB" rel="nofollow noreferrer">https://codepen.io/anon/pen/pqPOyB</a></p>