<h1>Contoh position: sticky</h1>
<div id="relative-parent">
  <table>
    <tr>
      <th>Header Kolom 1</th>
      <th>Header Kolom 2</th>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
    <tr>
      <td>Data Kolom 1</td>
      <td>Data Kolom 2</td>
    </tr>
  </table>
</div>
#relative-parent{
  position: relative;
}
table{
  width:100%;
  border-collapse: collapse; 
}
th{
  position: sticky;
  top : 0px;
  background: #555;
  color : #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.