Таблица с фиксированной шапкой, и некоторыми столбцами. Возможно?

Как реализовать таблицу на HTML/CSS/JS с фиксированной шапкой и первыми столбцами? (Например, в Excel можно закрепить некторые строки и столбцы). Хотел подсмотреть в google docs; очень много кода, к тому же — все ужато. Поэтому, спрашиваю здесь.


Пытался решить с помощью thead {position: fixed}. Проблема в том, что таблица очень большая, не входит в размеры экрана, и, при скролле по горизонтали шапка остается фиксированной. Проще говоря, на CSS4 псевдо-CSS это должно выглядеть так: thead {position-x: default; position-y: fixed;}.


Но это пол беды. Не представляю как закрепить столбцы.


Интуитивно кажется, что все решается на JavaScript, но видимо гуглил я неумело.
  • Вопрос задан
  • 26727 просмотров
Пригласить эксперта
Ответы на вопрос 4
freeek
@freeek
А jQuery вам подойдёт? У них много подобных плагинов, например.

Ну а дальше, если такой вариант устроит — гугл вам в помощь :)
Ответ написан
Комментировать
@s0rr0w
В гугл-доксах сделано несколько твиков, чтобы производительность не страдала. Но все они требуют активного использования JS

1. table-layout: fixed
Это необходимо для того, чтобы не нарываться на очень медленный алгорим автоматического выравнивания ширины и высоты ячеек. Но сразу начинаются проблемы с внутренним контентом. Если текст не будет помещаться в ячейку, он будет «вываливаться» за его пределы. Решается путем overflow: hidden. Одновременно с этим потребуется механизм ручного изменения размеров ячеек.

2. Заголовки отдельно, данные отдельно
Данные и заголовки к ним разлелены на несколько таблиц. Это позволяет скроллировать не кусочек таблицы, а всю таблицу внутри контейнера.

3. Явно заданная высота
overflow-y: auto требует фиксированной высоты контейнера, в котором будет скроллироваться контент. Чтобы все работало хорошо, нужно не забывать про событие onresize у окна, потому что при изменении размеров браузера все «сломается»

От себя. Я сделал ручное изменение размеров ширины ячейки, как мне казалось, «хитрым» способом. Так как таблица разрезается на несколько физических (заголовки и данные), я каждому TD/TH в первой TR присвоил класс cell_n, где n — индекс ячейки. Потом создал динамический stylesheet, в котором описал эти классы. И при изменении размера я всего лишь менял значение width в классе. На тот момент идея казалась мне отличной, но реальная производительность у данного решения невысокая, ниже чем у инлайнового указания ширины нужной ячейке.
Ответ написан
Комментировать
Anonym
@Anonym
Программирую немного )
Самый простой вариант — на JS (jQuery, например) склонировать нужные данные, положить поверх таблицы и зафиксировать в CSS.
Ответ написан
Комментировать
titulusdesiderio
@titulusdesiderio
IT-специалист
Пытался на jquery что-то сделать. получилось не самым лучшим образом.
решил привязаться к css top каждой ячейки (благодаря этому можно закреплять не просто столбец а отдельно взятые ячейки)
во первых — почему-то полоса горизонтальной прокрутки появляется только проскроллив немного вниз о_О хотя если скроллить через, например тачпад (горизонтальный скролл) то видно что таблица не влезает в документ и всё работает как надо.
во вторых — задержка. перемещение ячеек происходит после срабатывания события scroll() а следовательно они как-бы догоняют.
Так или иначе, может быть опираясь на то что я там наваял, у вас получится сделать что-то более презентабельное (:
Ответ написан
Ваш ответ на вопрос

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

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