@sanex3339

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

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

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

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

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

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

Вопросы: как можно починить залипание border'а, и если никак - есть ли другой способ двигать по оси Y, без какого либо влияния на другие ячейки таблицы, ширина которых рассчитывается с учетом ширины ячеек внутри ?
  • Вопрос задан
  • 313 просмотров
Решения вопроса 2
Я подобного эффекта достигаю при помощи сдвига всех th внутри thead при помощи обычного relative + top: https://jsfiddle.net/4hLv61xL/
Эффект аналогичен вашему, но поддержка браузерами лучше. Проблема с бордером остается (он залипает на самой таблице), а всё из-за border-collapse. Т.е. тут либо симулировать border-collapse самому, либо просто дорисовывать внизу th горизонтальную полоску при помощи :after
Ответ написан
@sanex3339 Автор вопроса
На основе варианта Олег Матрозов'а накидал вот такой пример: https://jsfiddle.net/pvskwe2m/11/
Почти то, что надо, но в Firefox'е при таком подходе толщина линий между th получается в 2px, в хроме - как и должно быть - 1px.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы