<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus quibusdam nostrum quo tempore veritatis magnam similique nisi quis enim soluta, cupiditate officiis. Voluptate eligendi dolor earum ipsam obcaecati? Placeat.</p>

<table>
  <thead>
    <tr>
      <th>Header Cell</th>
      <th>Header Cell</th>
      <th>Header Cell</th>
      <th>Header Cell</th>
      <th>Header Cell</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Footer Cell</th>
      <th>Footer Cell</th>
      <th>Footer Cell</th>
      <th>Footer Cell</th>
      <th>Footer Cell</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
  </tbody>
</table>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus quibusdam nostrum quo tempore veritatis magnam similique nisi quis enim soluta, cupiditate officiis. Voluptate eligendi dolor earum ipsam obcaecati? Placeat.</p>

table {
  border-collapse: collapse;
}
th,
td {
  padding: 1rem;
}
thead,
tfoot {
  background: #eee;
}
thead {
  position: sticky;
  top: 0;
  border-bottom: 2px solid #ccc;
}
tfoot {
  position: sticky;
  bottom: 0;
  border-top: 2px solid #ccc;
}

body {
  font: 110%/1.4 system-ui;
  margin: 0;
  padding: 10rem 2rem 50rem;
}