Sticky thead

by Arthur Lutkevichus

HTML

<div>
  <table>
  <thead>
    <tr>
      <th>TH1</th>
      <th>TH2 asadsd as ads</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>x</td>
   ...

SCSS

div {
  overflow: auto;
  height: 10rem;
  background: skyblue;
  margin: 5rem;
}

table {
  background: yellow;
  width: 100%;
}

table thead {
  //transform: translateY(-100%);
  height: 0;
}

table th {
  background: orange;
  position: sticky;
  top: 0;
  transform: translateY(-50%);
  z-index: 999;
}