Всегда отображать текст в верхних ячейках таблицы при прокрутке

Question

В моем проекте есть таблица. В крайнем левом столбце отображаются группы; справа детали. Иногда в группе может быть много записей, поэтому группа не может полностью уместиться на экране. Поскольку текст в левом столбце отображается вверху, возможно, что метка исчезнет при прокрутке.

Я добавил для вас пример изображения. Красная область представляет собой область просмотра. Если вы прокрутите вниз, Группа 1 должна оставаться видимой, пока пользователь не прокрутит вниз дальше.

Есть ли способ закрепить текст в верхней части экрана с помощью CSS или JavaScript таким образом, чтобы он оставался вверху при прокрутке, пока ячейка все еще находится в области просмотра?

пример

Answer 1

Использование "position: sticky;" Думаю, могу вам помочь.

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

<div>
  <div class="sticky">Im sticky!</div>
</div>

Answer 2

Я нашел решение. Во-первых, вы должны поместить метки группы в элемент "". Затем добавьте класс bootstrap 'sticky-top' или следующие атрибуты:

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Пример:

<table>
  <tr>
    <th rowspan="2">
      <span class="sticky-top">Group</span>
    </th>
    <td>Detail</td>
  </tr>
  <tr>
    <td>Detail</td>
  </tr>
</table>