Как сделать в таблице фиксированную шапку и первый столбец на чистом html и CSS3?

Question

[Vanya Huk]

Как сделать в таблице фиксированную шапку и первый столбец на чистом html и CSS3 чтобы при скроле вниз фиксировалась шапка, а при скроле в сторону фиксировался первый столбец?

Answer 1

[Арсений Матыцин]

https://codepen.io/i-am-studio_ru/pen/vazmyN?edito...
И да. Если применять свойство не к строке, а непосредственно ячейкам, то можно и сделать фиксированную колонку. Чтобы оценить работу во все стороны я советую поменять «вид» в редакторе и посжимать.

Правда обращаю внимание, что это решение, по моему мнению, является костыльным. Оптимальнее сформировать решение на JS, который будет считать размеры 1 и более строк шапки таблицы.

Comments

[Ankhena]

Можно пример, пожалуйста, со sticky для thead?

[Арсений Матыцин]

Хороший вопрос, заставил меня попотеть. Когда именно вынесли свойство из обихода мне пока неясно, но вот пруф, что так было на момент 2012 года)
Сейчас интересу ради смотри методы обхода, но на данный момент стандарты говорят, что нельзя использовать position: sticky к таблицам. Что как по мне, так же глупо, как и запрет тега <nobr>

Если найду решение, оно появится под этим комментарием.

[Арсений Матыцин]

https://codepen.io/i-am-studio_ru/pen/vazmyN?edito...
И да. Если применять свойство не к строка, а непосредственно ячейкам, то можно и сделать фиксированную колонку. Чтобы оценить работу во все стороны я советую поменять «вид» в редакторе и посжимать.

Правда обращаю внимание, что это решение, по моему мнению, является костыльным.

[Ankhena]

Арсений Матыцин, я бы тоже не стала делать это на css.
Но так, чисто ради интереса.

Answer 2

[snap44]

Попробуйте сделать таблицу в таблице. Внешняя таблица - это шапка и столбец + объединенные ячейки, внутри которых вторая таблица с оверфлоу:скролл

Как-то так. С высотой надо додумать что-то

Answer 3

[Денис Копица]

На чистом html+css не получится до полноценного внедрения в браузеры position: sticky.
Сейчас такое можно сделать только для firefox. В chrome и подобных sticky не поддерживается для thead и tr