Как сделать фиксированную шапку таблицы на css?

Question

[Артём Щурин]

Добрый день!
Вот уже пол дня придумываю рецепт для таблицы с фиксированной шапкой, реализация на css, не знаю толи моих знаний не хватает, то ли пытаюсь невозможное сделать.
Дело в том, я не могу задать явно ширину столбцов
И если применять position: fixed(absolute), то ширина заголовков таблицы схлопывается до размера контента, отсюда же едет форматирование заголовков таблицы и они перестают подстраиваться под тело таблицы.

Comments

[Владислав Килин]

https://jsfiddle.net/dPixie/byB9d/3/light/ - такое решение вам подходит?

[Артём Щурин]

да, спасибо большое

[Артём Щурин]

Отличнейшая идея с div'ми)

Answer 1

[Павел Радьков]

codepen.io/paulradzkov/pen/sjyFb — на чистом css можно только с ограничениями по количеству резиновых колонок (одна резиновая, остальные в px или %) и заданными явно высоте шапки и самой таблицы.

Comments

[Артём Щурин]

в коментах к вопросу хорошее решение без указания явной ширины

[Павел Радьков]

Действительно. Зря оно в комментариях к вопросу, а не в ответах :)

Answer 2

[khipster]

display: table;
table-layout: fixed;
overflow: hidden;

Comments

[Артём Щурин]

table-layout: fixed; - всё портит

[dom1n1k]

Артём Щурин: Если портит, то значит в дизайне таблицы что-то не так. Например, ширина какой-то и колонок указана заведомо меньше реального контента.

[Артём Щурин]

dom1n1k: в моём случаем все столбцы получались одинаковой ширины

[dom1n1k]

Артём Щурин: ну так надо указать в процентах.
Хотя, конечно, если содержимое таблицы вообще-вообще непредсказуемое, тогда fixed не лучший выбор.