table sticky header

table-sticky-header.txt

<div class="table-wrap">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>




CSS

.table-wrap { position: relative; width: 100%; }
table { border-collapse: separate; border-spacing: 0;width: 100%;
    thead { position: sticky; top: 0; z-index: 1; }
    tr td,
    tr th { border: 1px solid #ccc; border-top: none;border-right: none;
        &:last-child {border-right: 1px solid #ccc;}
    }
    thead tr:first-child {
        td, th {border-top: 1px solid #ccc;}
    }
}