Меню Закрыть

Таблица с прокруткой html

Опубликовал Александр Шабуневич — 5 Май 2006, 23:41

Недавно понадобилось разместить длинную и широкую таблицу на странице. Выход только один: сделать ее скроллируемой. Основным требованием являлась возможность одновременной прокрутки таблицы по горизонтали и вертикали.

Первый вариант

Способов существует несколько, самым простым из которых является обертка таблицы в

Минимум усилий — неплохой результат: удобнее в пользовании и помогает избежать разваливания блочной верстки в Internet Explorer.

Второй вариант

Однако для полного удовлетворения не хватает одной простой вещи, а именно — фиксации заголовков таблицы, чтобы при прокрутке они не пропадали из вида. Вроде бы просто, но я смог найти универсальный способ лишь для IE (кто бы мог подумать).

Делается это так. Для начала составляем правильную структуру таблицы:

Подробнее про «правильные» таблицы читайте у Роджера Йохансона.

Подобная структура позволяет нам отделить зону заголовков от основного содержания таблицы. Я прописал класс fixed для элемента

, так как IE 5 не понимает конструкцию .scroll-table thead tr , которой достаточно для IE 6.

Теперь нам достаточно прописать парочку правил, чтобы заставить IE фиксировать наши заголовки:

Кроме того, важно добавить правило position:relative к блоку scroll-table , чтобы заголовок таблицы не «вылез» наверх. Это требуется только при работе в стандартном режиме (т. е. с указанием верного DOCTYPE).

Таблица 2 — в этом случае таблица прекрасно работает в IE 5/6. В остальных же браузерах она ведет себя аналогично предыдущему примеру, т. е. вполне пригодна к использованию.

. а теперь для Firefox

Обычно с этим браузером проблем гораздо меньше, чем с IE. В данном же случае, я так и не смог найти приличного решения. Способа два (по сути, это один вариант с небольшим отличием):

  1. Сделать таблицу фиксированной ширины — тогда заголовки фиксируются нормально
  2. Сделать таблицу динамической, но при этом «потерять» скроллбар при маленьком размере таблицы
Читайте также:  Как заказать настройки интернета на yota

Правила для Firefox выглядят примерно так:

Для начала мы спрятали это правило от IE, указав .scroll-table>table — это селектор для дочернего элемента, который IE не понимает.

Правда это не сработает для 7-ой версии IE — поэтому правильнее всего будет применить здесь conditional comments, да и вообще, хватит уже.

Далее мы указали требуемую высоту основной части таблицы tbody . И назначили ей поведение overflow:auto , отвечающее за появление полос прокрутки. Правило overflow-x:hidden работает только в FF 1.5 (если не ошибаюсь) и служит для убирания «лишнего» скроллбара с чисто декоративными целями.

Данный способ мне кажется наиболее простым и понятным, хоть он и не лишен недостатков. Если кто-то знает лучший способ решить подобную задачу — прошу отписаться в комментариях =)

у меня есть таблица, подобная той, которую я заполняю данными

но прокрутка не работает, я хочу исправить высоту таблицы, и если она превышает, то работайте с scrollbar

8 ответов

Первый Вариант

это работает во всех браузера

Второй Вариант

это относится только к вашему коду, но может иметь проблемы с IE9 поэтому я бы предложил первое решение

или Таблица с фиксированным заголовок

поздний ответ, другая идея, но очень короткое.

  1. положите стол в обертку div
  2. поместите содержимое ячеек заголовка в div
  3. исправить заголовок содержание см. в 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 и внизу у таблицы сделать полосу прокрутки? Саму таблицу сжимать нельзя, ширина и высота её строчек и столбцов не должны измениться.

Как должно быть:

Это примерные скриншоты на обычной таблице.

Рекомендуем к прочтению

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code

Adblock detector