HTML-таблица с двумя липкими столбцами и заголовками (используется только CSS)

Question

Я пытаюсь получить два фиксированных столбца и заголовка, используя таблицу HTML + прокручиваемое тело. Я много искал и нашел эти подходы:

• это (только 1 фиксированный столбец / заголовок)
• и this (только 1 фиксированный столбец / заголовок; нет разметки таблицы)
• и я также создал свое собственное решение , используя библиотеку, которая прекрасно работает, но мне не нравится, как размечаются пометки тегов html таблицы и, кроме того, инициализация colModal не является это хорошо, так как у меня динамическое количество столбцов.

Поскольку я не удовлетворен ни одним из этих решений, я хотел бы знать, есть ли шанс выполнить эту работу только с использованием CSS?

Answer 1

Самое близкое, что я пришел, это это

Нет разметки таблицы HTML и нет поддержки IE. Я использовал position: sticky в заголовке и первом столбце.

Размеры таблицы являются переменными, но необходимо указать ширину ячеек.

Answer 2

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

Итак, я пришел к этому окончательному решению: https://jsfiddle.net/4s53f124/2/

Все, что вам нужно сделать, - это вызвать метод tableHeadFixer библиотеки (и если вы хотите немного изменить CSS):

 $(document).ready(function () {
     $("#fixTable").tableHeadFixer({"left": 2});
 });