сделать первый столбец закрепленным в таблице реагирования только с CSS

Question

Я пытаюсь сделать первый столбец таблицы реакции липким. Это почти сработало, хотя первая ячейка каждого ряда не очень липкая, как ожидалось. Вот коды и Box рабочий пример кода с проблемой. https://codesandbox.io/embed/objective-frog-m4imr?fontsize=14&hidenavigation=1&theme=dark. В этом коде, когда я прокручиваю по горизонтали, первый заголовок в первом столбце является липким, но остальная часть заголовка в первом столбце не является липкой, даже если у них одинаковый стиль CSS.

Этот вопрос может быть повторен, но я ищу решение, которое не требует jQuery, поскольку я хочу использовать только CSS. И также я не хочу использовать любую другую позицию, как абсолютную или относительную, как упомянуто в других вопросах.

Если кто-то может помочь мне решить эту проблему, это было бы здорово!

Answer 1

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

Хотя, как только я удаляю переполнение из стилей tbody, первый столбец становится липким, но возникает другая проблема, связанная с тем, что первая строка заголовка больше не является липкой, поскольку не заданы стили переполнения. Тем не менее, я делаю наклейку в первом ряду, это просто часть, где только позиция.

Решение:

для всех, кто использует таблицу реакции и хочет сделать первый столбец и первый заголовок более липкими без упаковки и jQuery, только CSS

https://codesandbox.io/s/objective-frog-m4imr?fontsize=14&hidenavigation=1&theme=dark

Answer 2

table немного сложно работать с новым стилем макета, поэтому я написал рабочий PO C, используя grid:

section {
  width: 600px;
  height: 200px;
  position: relative;
  overflow: scroll;
  display: grid;
  grid-template-columns: repeat(6, 200px);
  grid-template-rows: repeat(6, 50px)
}

div,
header {
  background: white;
  border: solid;
}

.rh {
  position: sticky;
  left: 0;
}

header {
  position: sticky;
  top: 0;
}

header:first-child {
  left: 0;
  z-index: 100;
}

<section>
  <header>header</header>
  <header>header2</header>
  <header>header3</header>
  <header>header4</header>
  <header>header5</header>
  <header>header6</header>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
</section>