Полоса прокрутки у таблицы
Из-за этой таблицы страница расширяется. Как сделать так, чтобы страница не расширялась, то есть сделать ширину отображаемого фрагмента, например, 600px и внизу у таблицы сделать полосу прокрутки? Саму таблицу сжимать нельзя, ширина и высота её строчек и столбцов не должны измениться. Как должно быть: 
Как получается: 
Это примерные скриншоты на обычной таблице.
Отслеживать
19.1k 6 6 золотых знаков 30 30 серебряных знаков 44 44 бронзовых знака
задан 26 июн 2015 в 7:51
2,510 5 5 золотых знаков 31 31 серебряный знак 60 60 бронзовых знаков
Задать у контейнера фиксированную ширину ( width: 600px ) и сделать overflow: scroll .
26 июн 2015 в 7:54
Думаю вы это знаете и ваш дизайн чем-то обоснован, но все же напомню, что горизонтальная прокрутка не приветствуется в web-дизайне 🙂
26 июн 2015 в 8:13
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Можно задать у контейнера фиксированную ширину ( width: 600px ) и сделать overflow: scroll :
table < width: 2000px; >td < border: solid 1px; >.container
1 2 3 4 5
Отслеживать
ответ дан 26 июн 2015 в 8:02
19.1k 6 6 золотых знаков 30 30 серебряных знаков 44 44 бронзовых знака
table < display: block; overflow: auto; max-width: 100%; >td
123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890
Отслеживать
ответ дан 26 июн 2015 в 9:06
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать прокрутку страницы в html
Разрешить или запретить прокрутку страницы можно сделать с помощью элемента div и свойства overflow в CSS.
Например, создадим блок с классом scroll и применим к нему свойство overflow-y: scroll; :
class="scroll"> .scroll height: 200px; /* Высота блока */ overflow-y: scroll; /* Включаем вертикальную прокрутку */ > Теперь, если содержимое блока scroll превысит высоту блока, то появится полоса прокрутки, с помощью которой можно будет прокручивать содержимое.
Как сделать горизонтальную прокрутку таблицы на сайте
Бывает, что при создании мобильной версии сайта, нужно сделать так, чтобы таблица была хорошо видна, но при этом она настолько большая, что ее не уменьшить до размеров экрана мобильного устройства так, чтобы было нормально видно все ее ячейки.
В этом случае выручит горизонтальная прокрутка таблицы, так будет намного лучше видно ее содержимое.
Сделать горизонтальную прокрутку таблицы очень просто, достаточно знать алгоритм работы такой верстки, ну а написать стили, это уже совсем просто.
Настройка
Для того, чтобы у таблицы появилась горизонтальная прокрутка, ей нужно задать фиксированную ширину и поместить внутри родительского блока, у которого ширина будет изменяться.
Создаем родительский блок с классом table-wrap , задаем ему максимальную ширину равную ширине таблицы, простую ширину делаем 100%, атрибут overflow ставим в auto.
Затем внутри него создаем таблицу с классом table и фиксированной шириной.
Вид услуги Ед. изм. Цена (руб.) Кол-во посещений Консультация психолога Посещение от 2000 руб. 1 Консультация гастроэнтеролога Посещение от 5000 руб. 1
.table-wrap < max-width: 800px; width: 100%; overflow: auto; >.table
| Вид услуги | Ед. изм. | Цена (руб.) | Кол-во посещений |
|---|---|---|---|
| Консультация психолога | Посещение | от 2000 руб. | 1 |
| Консультация гастроэнтеролога | Посещение | от 5000 руб. | 1 |
При ширине страницы 1000px и более прокрутки видно не будет, при уменьшении размера страницы по ширине, у таблицы появится горизонтальная прокрутка.
Настройка внешнего вида таблицы создается с помощью дополнительных стилей.
Как видите все просто, используйте этот способ в своих работах и создавайте качественный контент.
Таблица с прокруткой и фиксированным заголовком
Недавно понадобилось разместить длинную и широкую таблицу на странице. Выход только один: сделать ее скроллируемой. Основным требованием являлась возможность одновременной прокрутки таблицы по горизонтали и вертикали.
Первый вариант
Способов существует несколько, самым простым из которых является обертка таблицы в с указанием ширины (и/или высоты) и стиля: overflow:auto . Например так:
div.scroll-table
Минимум усилий — неплохой результат: удобнее в пользовании и помогает избежать разваливания блочной верстки в Internet Explorer.
Второй вариант
Однако для полного удовлетворения не хватает одной простой вещи, а именно — фиксации заголовков таблицы, чтобы при прокрутке они не пропадали из вида. Вроде бы просто, но я смог найти универсальный способ лишь для IE (кто бы мог подумать).
Делается это так. Для начала составляем правильную структуру таблицы:
Название позиции Бренд Стоимость . . .
Подробнее про «правильные» таблицы читайте у Роджера Йохансона.
Теперь нам достаточно прописать парочку правил, чтобы заставить IE фиксировать наши заголовки:
.scroll-table tr.fixed
Кроме того, важно добавить правило position:relative к блоку scroll-table , чтобы заголовок таблицы не «вылез» наверх. Это требуется только при работе в стандартном режиме (т. е. с указанием верного DOCTYPE).
Таблица 2 — в этом случае таблица прекрасно работает в IE 5/6. В остальных же браузерах она ведет себя аналогично предыдущему примеру, т. е. вполне пригодна к использованию.
. а теперь для Firefox
Обычно с этим браузером проблем гораздо меньше, чем с IE. В данном же случае, я так и не смог найти приличного решения. Способа два (по сути, это один вариант с небольшим отличием):
- Сделать таблицу фиксированной ширины — тогда заголовки фиксируются нормально
- Сделать таблицу динамической, но при этом «потерять» скроллбар при маленьком размере таблицы
Правила для Firefox выглядят примерно так:
.scroll-table>table tbody
Для начала мы спрятали это правило от IE, указав .scroll-table>table — это селектор для дочернего элемента, который IE не понимает.
Правда это не сработает для 7-ой версии IE — поэтому правильнее всего будет применить здесь conditional comments, да и вообще, хватит уже.
Далее мы указали требуемую высоту основной части таблицы tbody . И назначили ей поведение overflow:auto , отвечающее за появление полос прокрутки. Правило overflow-x:hidden работает только в FF 1.5 (если не ошибаюсь) и служит для убирания «лишнего» скроллбара с чисто декоративными целями.
Данный способ мне кажется наиболее простым и понятным, хоть он и не лишен недостатков. Если кто-то знает лучший способ решить подобную задачу — прошу отписаться в комментариях =)
Ссылки по теме
- Способ, на котором я основывался
- Вариант с фиксированной шириной и без поддержки Оперы
- Опять же фиксированная ширина + страшный исходник
- Этот работает не совсем хорошо