Полоса прокрутки у таблицы
Из-за этой таблицы страница расширяется. Как сделать так, чтобы страница не расширялась, то есть сделать ширину отображаемого фрагмента, например, 600px и внизу у таблицы сделать полосу прокрутки? Саму таблицу сжимать нельзя, ширина и высота её строчек и столбцов не должны измениться. Как должно быть: 
Как получается: 
Это примерные скриншоты на обычной таблице.
Отслеживать
19.1k 6 6 золотых знаков 30 30 серебряных знаков 44 44 бронзовых знака
задан 26 июн 2015 в 7:51
2,510 5 5 золотых знаков 31 31 серебряный знак 61 61 бронзовый знак
Задать у контейнера фиксированную ширину ( 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
124k 24 24 золотых знака 131 131 серебряный знак 312 312 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420
Прокрутка содержимого таблицы
Чтобы сделать таблицу с фиксированной высотой и вертикальной прокруткой потребуется разделить её на две части. В первой будет заголовок таблицы, во второй части, тело в контейнере со свойством overflow-x: auto .
Название блюда Белки Жиры Углеводы Ккал Азу 11,9 14,2 10,2 214 CSS-стили:
.scroll-table-body < height: 300px; overflow-x: auto; margin-top: 0px; margin-bottom: 20px; border-bottom: 1px solid #eee; >.scroll-table table < width:100%; table-layout: fixed; border: none; >.scroll-table thead th < font-weight: bold; text-align: left; border: none; padding: 10px 15px; background: #d8d8d8; font-size: 14px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; >.scroll-table tbody td < text-align: left; border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding: 10px 15px; font-size: 14px; vertical-align: top; >.scroll-table tbody tr:nth-child(even) < background: #f3f3f3; >/* Стили для скролла */ ::-webkit-scrollbar < width: 6px; >::-webkit-scrollbar-track < box-shadow: inset 0 0 6px rgba(0,0,0,0.3); >::-webkit-scrollbar-thumb
Как сделать прокрутку в таблице html
Нередко при создании веб-страниц можно столкнуться с ситуацией, когда содержимое блока занимает гораздо больше места, чем сам определено шириной и высотой блока. В этой ситуации по умолчанию браузер все равно отображает содержимое, даже если оно выходит за границы блока.
Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:
- auto : если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаются
- hidden : отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаются
- scroll : в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется
- visible : значение по умолчанию, контент отображается, даже если он выходит за границы блока
Рассмотрим применение двух значений:
Прокрутка в CSS3 .article1 < width: 300px; height: 150px; margin:15px; border: 1px solid #ccc; overflow: auto; >.article2Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и горя – ничего не было видно. Да, это тот самый дуб», – подумал князь Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.
Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и горя – ничего не было видно. Да, это тот самый дуб», – подумал князь Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.
Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных свойств overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали. Данные свойства принимают те же значения, что и overflow :
overflow-x: auto; overflow-y: hidden;
scroll-behavior
scroll-behavior — CSS-свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему viewport пространству.
Юзер-агенты могут игнорировать это свойство.
| Начальное значение | auto |
|---|---|
| Применяется к | прокручиваемые блоки |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |
Синтаксис
/* Ключевые слова */ scroll-behavior: auto; scroll-behavior: smooth; /* Глобальные значения */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset;
Значения
Стандартное поведение прокрутки без эффекта плавности.
Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.
Синтаксис
scroll-behavior =
auto | (en-US)
smooth
Пример
HTML
nav> a href="#page-1">1a> a href="#page-2">2a> a href="#page-3">3a> nav> scroll-container> scroll-page id="page-1">1scroll-page> scroll-page id="page-2">2scroll-page> scroll-page id="page-3">3scroll-page> scroll-container>
CSS
a display: inline-block; width: 50px; text-decoration: none; > nav, scroll-container display: block; margin: 0 auto; text-align: center; > nav width: 339px; padding: 5px; border: 1px solid black; > scroll-container display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; > scroll-page display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; >
Результат
Характеристики
| Specification |
|---|
| CSS Overflow Module Level 3 # smooth-scrolling |