Как закрепить шапку таблицы при прокрутке

Короткий ответ

Задайте ячейкам шапки position: sticky и top: 0, а таблицу поместите в блок с ограниченной высотой и прокруткой:

<style>
  .wrap { max-height: 150px; overflow: auto; border: 1px solid silver; }
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 6px 12px; text-align: left; }
  th { position: sticky; top: 0; background: steelblue; color: white; }
</style>
 
<div class="wrap">
  <table>
    <thead><tr><th>Day</th><th>Visitors</th></tr></thead>
    <tbody>
      <tr><td>Monday</td><td>120</td></tr><tr><td>Tuesday</td><td>98</td></tr>
      <tr><td>Wednesday</td><td>143</td></tr><tr><td>Thursday</td><td>110</td></tr>
      <tr><td>Friday</td><td>87</td></tr><tr><td>Saturday</td><td>64</td></tr>
    </tbody>
  </table>
</div>

Прокрутите таблицу — строка заголовка останется наверху.

Прокрутка всей страницы

Если таблица прокручивается вместе со страницей, обёртка не нужна: шапка прилипнет к верху окна. Когда на сайте есть фиксированная шапка, задайте top равным её высоте, например top: 60px.

Закрепить первый столбец

Так же закрепляют первую колонку для горизонтальной прокрутки: ячейкам первого столбца задают position: sticky; left: 0 и фон.

Частая ошибка

У закреплённых ячеек забывают фон. Шапка прозрачная, и при прокрутке строки таблицы просвечивают сквозь неё, накладываясь на заголовки. Ещё одна ловушка — overflow: hidden у какого-нибудь родителя между таблицей и прокручиваемым блоком: sticky тогда перестаёт работать.