Как правильно двигать thead по оси Y без влияния на остальные ячейки таблицы?

Question

[sanex3339]

Суть: пытаюсь закрепить вверху страницы, когда он при скролле таблицы исчезает за верхнем краем экрана.
Сначала делал через создание еще одной таблицы с клонированным и позиционированием через position: absolute и расчет сдвига по оси Y на js.

Но в предполагаются кнопки сортировки, по этому клонирование не покатило.

Тогда попробовал оригинальный двигать, все так же, через position: absolute.
Появилось много проблем, самая главная - ширина ячеек в таблице вычисляется автоматически и при position: absolute у thead, он уже не влияет на ширину ячеек в таблице, соответственно, она становится меньше по ширине.

Далее, придумал способ через transform: translateY.
Способ подходит всем, кроме одной проблемы - при сдвиге через translateY у внутри border остается на старом месте.

Вот пример: https://jsfiddle.net/9g8ho0sa/1/

Вопросы: как можно починить залипание border'а, и если никак - есть ли другой способ двигать по оси Y, без какого либо влияния на другие ячейки таблицы, ширина которых рассчитывается с учетом ширины ячеек внутри ?

Comments

[sanex3339]

актуально!!!!

Answer 1

[Олег Матрозов]

Я подобного эффекта достигаю при помощи сдвига всех th внутри thead при помощи обычного relative + top: https://jsfiddle.net/4hLv61xL/
Эффект аналогичен вашему, но поддержка браузерами лучше. Проблема с бордером остается (он залипает на самой таблице), а всё из-за border-collapse. Т.е. тут либо симулировать border-collapse самому, либо просто дорисовывать внизу th горизонтальную полоску при помощи :after

Comments

[Олег Матрозов]

Пример с симуляцией бордера: https://jsfiddle.net/pvskwe2m/1/ (для наглядности нарисовал синим)

[sanex3339]

*тут либо симулировать border-collapse самому* - поясните пожалуйста тут подробнее

[sanex3339]

Я пока использую решение через display: table у thead, tbody и tfooter, но до того, как применили display: table, циклом проходимся по всем td и th в table, запоминаем их ширину, после применения display: table, присваиваем всем td, и th сохраненные значения ширины. Более менее нормально выглядит, но пока еще есть небольшие косячки.

[sanex3339]

UPD: пример с border'ом через after таки пока не подходит, т.к. у меня бывают вот такие thead'ы https://jsfiddle.net/pvskwe2m/3/

[sanex3339]

upd: на основе вашего варианта накидал вот такой: https://jsfiddle.net/pvskwe2m/5/ Почти то, что надо, но в firefox'е при таком подходе толщина линий между th получается в 2px, в хроме - как и должно быть - 1px

[sanex3339]

https://jsfiddle.net/pvskwe2m/11/

[Олег Матрозов]

sanex3339:
> *тут либо симулировать border-collapse самому* - поясните пожалуйста тут подробнее
В том плане, что по дефолту вы делаете у ячеек border: 1px... и у все таблицы collapse. А можно у ячеек делать бордер только снизу и справа, а у таблицы сверху и слева - эффект будет такой же (т.е. бордер в 1 пиксель везде), но при этом вы будете иметь у th бордер снизу, который не будет схлопнут из-за collapse.

[Олег Матрозов]

Вот пример с симуляцией коллапса: https://jsfiddle.net/dLcbpxwc/

[Олег Матрозов]

sanex3339: И да, в этом примере нет вашего бага с FF и двойным бордером

[Олег Матрозов]

sanex3339: > Я пока использую решение через display: table у thead, tbody и tfooter, но до того, как применили display: table, циклом проходимся по всем td и th в table, запоминаем их ширину, после применения display: table, присваиваем всем td, и th сохраненные значения ширины. Более менее нормально выглядит, но пока еще есть небольшие косячки.

Мне такой вариант изначально не подходил, так как я хотел оставить связку th-td дивой, реализовав у себя контрол ресайза колонок без необходимости по кому либо пробегаться, а просто меняя ширину th.

Answer 2

[sanex3339]

На основе варианта Олег Матрозов'а накидал вот такой пример: https://jsfiddle.net/pvskwe2m/11/
Почти то, что надо, но в Firefox'е при таком подходе толщина линий между th получается в 2px, в хроме - как и должно быть - 1px.