Содержание
Опубликовал Александр Шабуневич — 5 Май 2006, 23:41
Недавно понадобилось разместить длинную и широкую таблицу на странице. Выход только один: сделать ее скроллируемой. Основным требованием являлась возможность одновременной прокрутки таблицы по горизонтали и вертикали.
Первый вариант
Способов существует несколько, самым простым из которых является обертка таблицы в
Минимум усилий — неплохой результат: удобнее в пользовании и помогает избежать разваливания блочной верстки в Internet Explorer.
Второй вариант
Однако для полного удовлетворения не хватает одной простой вещи, а именно — фиксации заголовков таблицы, чтобы при прокрутке они не пропадали из вида. Вроде бы просто, но я смог найти универсальный способ лишь для IE (кто бы мог подумать).
Делается это так. Для начала составляем правильную структуру таблицы:
Подробнее про «правильные» таблицы читайте у Роджера Йохансона.
Подобная структура позволяет нам отделить зону заголовков от основного содержания таблицы. Я прописал класс fixed для элемента
Теперь нам достаточно прописать парочку правил, чтобы заставить IE фиксировать наши заголовки:
Кроме того, важно добавить правило position:relative к блоку scroll-table , чтобы заголовок таблицы не «вылез» наверх. Это требуется только при работе в стандартном режиме (т. е. с указанием верного DOCTYPE).
Таблица 2 — в этом случае таблица прекрасно работает в IE 5/6. В остальных же браузерах она ведет себя аналогично предыдущему примеру, т. е. вполне пригодна к использованию.
. а теперь для Firefox
Обычно с этим браузером проблем гораздо меньше, чем с IE. В данном же случае, я так и не смог найти приличного решения. Способа два (по сути, это один вариант с небольшим отличием):
- Сделать таблицу фиксированной ширины — тогда заголовки фиксируются нормально
- Сделать таблицу динамической, но при этом «потерять» скроллбар при маленьком размере таблицы
Правила для Firefox выглядят примерно так:
Для начала мы спрятали это правило от IE, указав .scroll-table>table — это селектор для дочернего элемента, который IE не понимает.
Правда это не сработает для 7-ой версии IE — поэтому правильнее всего будет применить здесь conditional comments, да и вообще, хватит уже.
Далее мы указали требуемую высоту основной части таблицы tbody . И назначили ей поведение overflow:auto , отвечающее за появление полос прокрутки. Правило overflow-x:hidden работает только в FF 1.5 (если не ошибаюсь) и служит для убирания «лишнего» скроллбара с чисто декоративными целями.
Данный способ мне кажется наиболее простым и понятным, хоть он и не лишен недостатков. Если кто-то знает лучший способ решить подобную задачу — прошу отписаться в комментариях =)
у меня есть таблица, подобная той, которую я заполняю данными
но прокрутка не работает, я хочу исправить высоту таблицы, и если она превышает, то работайте с scrollbar
8 ответов
Первый Вариант
это работает во всех браузера
Второй Вариант
это относится только к вашему коду, но может иметь проблемы с IE9 поэтому я бы предложил первое решение
или Таблица с фиксированным заголовок
поздний ответ, другая идея, но очень короткое.
- положите стол в обертку div
- поместите содержимое ячеек заголовка в div
- исправить заголовок содержание см. в CSS
HTML-код
в CSS
работает только в Chrome, но его можно адаптировать к другим современным браузерам. Таблица возвращается к общей таблице с полосой прокрутки в других brws. Использует свойство CSS3 FLEX.
для тех, кому интересно, как реализовать решение Гарри с более чем одним заголовком, Это:
для чего бы это ни стоило сейчас: вот еще одно решение:
- создайте два divs в A display: inline-block
- в первом div поместите таблицу только с заголовком (таблица заголовков tabhead )
- во 2-м div поместите таблицу с заголовком и данными (таблица данных / полная таблица tabfull )
- используйте JavaScript, используйте setTimeout(() => ) выполнить код после рендеринга / после заполнения таблицы результатами из fetch
- измерьте ширину каждый th в таблице данных (используя clientWidth )
- применить ту же ширину к аналогу в таблице заголовка
- установите видимость заголовка таблицы данных в скрытый и установите верхнюю часть поля в -1 * высота таблицы данных thead пикселей
С помощью нескольких настроек, это метод для использования (для краткости / простоты, я использовал d3js, те же операции могут быть сделаны с помощью простого DOM):
ожидание цикла рендеринга имеет преимущество использование механизма компоновки браузера thoughout процесс — для любого типа заголовка; он не привязан к специальному условию или длины содержимого ячейки как-то похожи. Он также правильно настраивается для видимых полос прокрутки (например, в Windows)
Я поставил codepen с полным примером здесь:https://codepen.io/sebredhh/pen/QmJvKy
добавляет градиент затухания к переполненному элементу таблицы HTML, чтобы лучше указать, что есть больше контента для прокрутки.
- таблица с фиксированным заголовком
- градиент прокрутки переполнения
- пользовательские полосы прокрутки
Есть PHP код: . Он выводит на страницу следующее:
Из-за этой таблицы страница расширяется. Как сделать так, чтобы страница не расширялась, то есть сделать ширину отображаемого фрагмента, например, 600px и внизу у таблицы сделать полосу прокрутки? Саму таблицу сжимать нельзя, ширина и высота её строчек и столбцов не должны измениться.
Как должно быть:
Это примерные скриншоты на обычной таблице.