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

Question

ОК, я искал в интернете как далеко, так и широко, и до сих пор не нашел ответа на свой вопрос. Я нашел несколько подходящих, но ни один из них не сработал так, как я хочу, чтобы он вел себя.

Сначала несколько простых основных правил.

Я не ищу решение, которое требовало бы, чтобы содержимое Div включало настройку переполнения. Хотя с этим решением есть несколько страниц stackoverflow, оно не обеспечивает то, что мне нужно, так как все, что мне нужно сделать, - это чтобы на моей странице было две полосы прокрутки ..... одна на div и одна на странице .... for моя работа, которая предоставит отрицательный пользовательский опыт.

Если это станет необходимостью, то решения JavaScript могут работать, но в надежде на чистое решение CSS.

Я использую или на Наименьшее количество попыток использовать чистый CSS с современным «position: Sticky;» feature,

Это кажется очень простым и понятным, и, по большей части, работает как ожидалось ...... это с одним незначительным исключением.

Если я использую только это

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

Он замерзнет всю строку заголовка, как только достигнет верхней части страницы.

Если я сделаю только это

th:first-child,
td:first-child {
  position: -webkit-sticky;  /* Safari */
  position: sticky;
  left: 0;
  z-index: 10;
}

Будет остановлено первое Столбец TD и первый столбец TH слева при прокрутке.

Пока что в любом случае он работает как положено. Однако, если я использую оба из них одновременно, я получаю только частичное поведение.

В этом случае левый столбец (TD & TH) будет зависать влево, как и ожидалось, однако TH будет зависать сверху всех TH за исключением первого столбца TH, который теперь прокручивается.

Я сделал jsFiddle пример ), чтобы показать текущее поведение. То, что я пытаюсь сделать, это заблокировать первый TH вверху или влево в зависимости от прокрутки страницы.

Answer 1

ОК, взял несколько дней перерыва в этом вопросе и, наконец, решил сделать еще один шаг. После некоторой дополнительной настройки я смог наконец заставить его работать с чистым CSS и без необходимости javaScript или включения переполнения DIV.

Обновлен jsFiddle с решением

Я смог настроить CSS на следующее, что правильно замораживает левый и верхний колонтитулы.

tr:nth-child(1)  th:nth-child(1) {
    position: -webkit-sticky;   /* Safari */
    position: sticky;
    top: 0;
}

tr:nth-child(2)  th:nth-child(1n+1) {
    position: -webkit-sticky;   /* Safari */
    position: sticky;
    top: 0;
}

tr:nth-child(2)  th:nth-child(1) {
    left: 0;
    z-index: 10;
}

tr:nth-child(1n+1) td:nth-child(1) {
    position: -webkit-sticky;   /* Safari */
    position: sticky;
    left: 0;
}