Как заблокировать первую строку и первый столбец таблицы при прокрутке, возможно, с использованием JavaScript и CSS?

Question

Как создать таблицу, в которой первая строка и первый столбец заблокированы, как в Excel, когда вы активируете «стоп-кадры»? Мне нужна таблица для горизонтальной и вертикальной прокрутки (для этого существует множество решений, но допускается только вертикальная прокрутка).

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

При прокрутке вправо первый столбец остается на месте, поскольку он содержит метки для строк.

Я почти уверен, что это невозможно только с помощью CSS, но кто-нибудь может подсказать мне решение JavaScript? Он должен работать во всех основных браузерах.

Answer 1

Как насчет решения, в котором вы помещаете фактические "данные" таблицы в собственный div с overflow: scroll;? Затем браузер автоматически создаст полосы прокрутки для той части «таблицы», которую вы не хотите блокировать, и вы можете поместить «заголовок таблицы» / первую строку чуть выше этой <div>.

Не уверен, как это будет работать с горизонтальной прокруткой.