<div class="page">
  <h1>Testing position:sticky on th elements</h1>
  <div id="table-scroll" class="table-scroll">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
          <th>Header 5</th>
          <th>Header 6</th>
          <th>Header 7</th>
          <th>Header 8</th>
          <th>Header 9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>
        <tr>
          <td>Data - 1256</td>
          <td>Data - 1256 Data - 1256 Data - 1256</td>
          <td>Data - 1256</td>
          <td>1256</td>
          <td>125</td>
          <td>Data - abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>ABCDE</td>
        </tr>

      </tbody>
    </table>
  </div>

body {
  background: grey;
  font-family: sans-serif;
}
.page {
  background: white;
  max-: 1200px;
}
.table-scroll {
  position: relative;
  max-width: 1200px;
  z-index: 1;
  margin: auto;
  overflow-y: scroll;
  height: 400px;
}
.table-scroll  table {
  border-collapse: collapse;
  width: 100%;
}
.table-scroll thead th {
  background-color: lightpink;
  text-align: left;
  position: -webkit-sticky;
  position: sticky;
  top:0;
  z-index: 10;
  border:none;
  box-shadow:0 1px 2px 0 rgba(240, 0, 0, 1) inset;
  border-left:1px solid red;
  border-right:1px solid red;
}
.table-scroll tbody tr:nth-child(even)  {
  background: yellow;
}
.table-scroll th,
.table-scroll td {
  padding: 10px 5px;
  border: 1px solid red;
}