css — Почему не работает overflow-x у таблицы, если у родителя display: flex;?
Вопрос задан
Изменён 2 месяца назад
Просмотрен 2k раза
коллеги. Прошу помочь справиться с проблемой. САБЖ: Есть несколько оберток, которые задают сетку сайта. Внутри main нужна таблица, которая при сужении экрана должна иметь скролл. Но скролл не ставиться! overflow-x — не отрабатывает!! Единственный вариант, который я вижу — display: flex; у родителя. Прошу, помогите справиться с этим.
.currency-table td.name { max-width: 150px; overflow: hidden; white-space: nowrap; } .wrapper { display: flex; /*ТРЫНДЕЦ!!!*/ overflow: hidden; /*у оберток выше но можно считать, что у него*/ }
<div> <main> <div> <div> <table> <thead> <tr> <th># </th> <th>Name</th> <th>Market Cap</th> <th>Price</th> <th>Volume(24h)</th> <th>Circulating Supply</th> <th>Change (24h)</th> <th>Price Graph (7d)</th> </tr> </thead> <!-- thead --> <tbody> <tr> <td>1</td> <td><img src="https://s2.coinmarketcap.com/static/img/coins/16x16/1.png" alt="Bitcoin"> Bitcoin Bitcoin Bitcoin</td> <td>$109,076,404,206</td> <td>$6,342.20</td> <td>$4,767,080,028</td> <td>17,198,512 BTC</td> <td>-3.47%</td> <td><img alt="sparkline" src="https://s2.coinmarketcap.com/generated/sparklines/web/7d/usd/1.png"></td> </tr> <tr> <td>2</td> <td><img src="https://s2.coinmarketcap.com/static/img/coins/16x16/1027.png" alt="Ethereum"> Ethereum</td> <td>$36,656,267,933</td> <td>$362.18</td> <td>$1,947,628,100</td> <td>101,210,315 ETH</td> <td>3.68%</td> <td><img alt="sparkline" src="https://s2. coinmarketcap.com/generated/sparklines/web/7d/usd/1027.png"></td> </tr> </tbody> <!-- /tbody --> </table> <!-- table --> </div> </div> </main> <aside> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae asperiores amet delectus eius, cumque perferendis eveniet ipsa similique ex iure deserunt atque debitis provident, saepe fugiat dignissimos nobis repellendus dolorem. </aside> </div>
- css
- flexbox
- таблицы
2
Необходимо добавить flex-direction: column;
к .wrapper
.currency-table-wrapper { text-align: left; overflow-x: auto; width: 100%; } .currency-table { width: 100%; } .currency-table th, .currency-table td { padding: 6px; vertical-align: middle; border-top: 0; border-bottom: 0; box-shadow: inset 0 -1px 0 0 #e1e5ea; } .currency-table td.grow { color: green; } .currency-table td.name { max-width: 150px; overflow: hidden; text-align: left; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; } .currency-table td.name img { display: inline-block; vertical-align: sub; } .currency-table td.pic { width: 160px; overflow: hidden; } .wrapper { display: flex; /*ТРЫНДЕЦ!!!*/ flex-direction: column; overflow: hidden; /*у оберток выше но можно считать, что у него*/ }
<div> <main> <div> <div> <table> <thead> <tr> <th># </th> <th>Name</th> <th>Market Cap</th> <th>Price</th> <th>Volume(24h)</th> <th>Circulating Supply</th> <th>Change (24h)</th> <th>Price Graph (7d)</th> </tr> </thead> <!-- thead --> <tbody> <tr> <td>1</td> <td><img src="https://s2.coinmarketcap.com/static/img/coins/16x16/1.png" alt="Bitcoin"> Bitcoin Bitcoin Bitcoin</td> <td>$109,076,404,206</td> <td>$6,342.20</td> <td>$4,767,080,028</td> <td>17,198,512 BTC</td> <td>-3.47%</td> <td><img alt="sparkline" src="https://s2.coinmarketcap.com/generated/sparklines/web/7d/usd/1.png"></td> </tr> <tr> <td>2</td> <td><img src="https://s2.coinmarketcap.com/static/img/coins/16x16/1027.png" alt="Ethereum"> Ethereum</td> <td>$36,656,267,933</td> <td>$362.18</td> <td>$1,947,628,100</td> <td>101,210,315 ETH</td> <td>3.68%</td> <td><img alt="sparkline" src="https://s2. coinmarketcap.com/generated/sparklines/web/7d/usd/1027.png"></td> </tr> </tbody> <!-- /tbody --> </table> <!-- table --> </div> </div> </main> <aside> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae asperiores amet delectus eius, cumque perferendis eveniet ipsa similique ex iure deserunt atque debitis provident, saepe fugiat dignissimos nobis repellendus dolorem. </aside> </div>
1
ОТВЕТ: Поставить overflow: auto; на обертку.
И все прекрасно работает. Вот (добавил кое-какие габариты, для наглядности и чтобы заставить таблицу быть больше враппера).
.currency-table-wrapper { text-align: left; overflow-y: hidden; width: 100%; overflow-x: scroll; max-width: 500px; max-height: 120px; } .currency-table { width: 1000px; }
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
overflow — CSS | MDN
Свойство CSS overflow
определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.
Использование свойства overflow
со значениями, отличными от visible
, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования (en-US). Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float’ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop
для соответствующего HTML-элемента, даже если overflow
имеет значение hidden
, элемент, возможно, придётся прокрутить.
Начальное значение | visible |
---|---|
Применяется к | Block-containers, flex containers, and grid containers |
Наследуется | нет |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | discrete |
Формат синтаксиса (en-US):
overflow =
[ (en-US) visible | (en-US) hidden | (en-US) clip | (en-US) scroll | (en-US) auto ] (en-US){1,2} (en-US)
overflow: visible overflow: hidden overflow: scroll overflow: auto overflow: inherit
Значения
visible
По умолчанию.
Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
hidden
Контент обрезается, без предоставления прокрутки.
scroll
Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
auto
Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.
Расширения Mozilla
-moz-scrollbars-none
Этот API вышел из употребления и его работа больше не гарантируется.Используйте
overflow:hidden
.-moz-scrollbars-horizontal
«> DeprecatedИспользование
overflow-x
(en-US) иoverflow-y
(en-US) предпочтительнее.-moz-scrollbars-vertical
DeprecatedИспользование
overflow-x
(en-US) иoverflow-y
(en-US) предпочтительнее.- -moz-hidden-unscrollable Non-standard
Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и
<html>
,<body>
клавишами со стрелками и колесом мыши.
p { width: 12em; height: 6em; border: dotted; overflow: visible; /* содержимое не обрезается */ }
visible
(default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: hidden; /* полосы прокрутки не предоставляются */ }
overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: scroll; /* всегда показывать полосы прокрутки */ }
overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */ }
overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Спецификация | Статус | Комментарий |
---|---|---|
CSS Overflow Module Level 3 Определение ‘overflow’ в этой спецификации. | Рабочий черновик | Changed syntax to allow one or two keywords instead of only one |
CSS Box Model Определение ‘overflow’ в этой спецификации. ![]() | Кандидат в рекомендации | Без изменений |
CSS Level 2 (Revision 1) Определение ‘overflow’ в этой спецификации. | Рекомендация | Initial definition. |
BCD tables only load in the browser
with JavaScript enabled. Enable JavaScript to view data.Firefox (Gecko) Примечания
Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам
table-group (<thead>
, <tbody>
, <tfoot>
). Это поведение будет исправлено в следующих версиях.
Internet Explorer Примечания
Internet Explorer 4 — 6 увеличивает элемент с overflow:visible
(значение по умолчанию), чтобы заполнить содержимое в нём. height/width
действуют подобно min-height/min-width
.
- Связанные свойства CSS:
text-overflow
(en-US),white-space
,overflow-x
(en-US),overflow-y
(en-US),overflow-inline
(en-US),overflow-block
,clip
(en-US),display
Last modified: 000Z»>7 нояб. 2022 г., by MDN contributors
html — Скрытое переполнение не работает
спросил
Изменено 10 лет, 8 месяцев назад
Просмотрено 44к раз
У меня есть div, содержащий текст, изображение и текстовые данные внутри ul li, а ниже — структура html. Я применил скрытое переполнение к классу .sbox, но, похоже, это не работает, и текстовые данные не кажутся скрытыми и переполненными.
JSFiddle — http://jsfiddle.net/SAN6n/
HTML
<ул><дел> <дел > Изображение1
Сейчас весна, и погода выглядит хорошей...
jpg"/>
CSS
.storyList { ширина:100%; высота:100%; } .sbox { плыть налево; ширина: 300 пикселей; высота: 150 пикселей; отступ: 5px 7px 8px 5px; верхняя граница: 20px; поле справа: 40px; фон:белый; граница: 1px сплошная #DDD; -webkit-border-radius: 3px; -moz-border-radius: 2px; радиус границы: 3px; переполнение: скрыто; } .boxContent { ширина:100%; высота:100%; граница: 1px сплошная #777; } .storyList ли { стиль списка: нет; } .оверлей { плыть налево; непрозрачность: 0,7; фон: #000; высота: 40 пикселей; ширина: 300 пикселей; положение: абсолютное; } h5{ плыть налево; верхняя граница: 0px; отступ: 0 0 0 5 пикселей; семейство шрифтов: Tahoma; межбуквенный интервал: 0,5 пикселей; размер шрифта: 30 пикселей; белый цвет; } .txtOverlay { непрозрачность: 0,7; фон: #000; высота: 110 пикселей; ширина: 300 пикселей; положение: абсолютное; верхняя граница: 150 пикселей; z-индекс: 1; вес шрифта: полужирный; плыть налево; семейство шрифтов: OpenSansRegular; межбуквенный интервал: 0,5 пикселей; размер шрифта: 10 пикселей; белый цвет; }
- HTML
- CSS
1
DEMO
Я думаю, это то, что вам нужно?
В любое время, когда у вас есть два
div
один внутри
другой первый
div должен быть установлен на относительный
и другие
div должны быть установлены на абсолютная
позиция.
Это потому, что вы используете абсолютную позицию. Вы не можете использовать абсолютную позицию со скрытым переполнением, поскольку абсолютная позиция перемещает целевой элемент вне контекста структуры документа.
0
На самом деле это работает, заполнение, которое вы указали, и его содержимое делают бесполезным применение overflow:hidden;
Посмотрите эту демонстрацию, чтобы понять мою точку зрения, я уменьшил высоту, и переполнение : скрытый
работает.
1
когда вы даете своему элементу абсолютную позицию — он также может быть помещен за пределы границ div — поэтому — скрытое переполнение не должно влиять на него
1
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
спросил
Изменено 5 лет, 10 месяцев назад
Просмотрено 21к раз
Если вы попытаетесь указать margin-left
для C1 div, он переместится, а переполнение будет скрыто. Но если вы попытаетесь указать
margin-left
для C2 div, он сдвинется вправо, но переполнение не будет скрыто, а переместится на следующую строку (поведение встроенного блока
).
Так почему же он не работает на C2 div? Есть ли способ решить эту проблему?
(В основном я хочу, чтобы div C1 и C2 были размещены вместе, а переполнение должно быть скрыто, если я увеличу их ширину или дам им поля).
Вот что я пытаюсь:
.c1 { ширина: 220 пикселей; высота: 200 пикселей; цвет фона: #666666; отображение: встроенный блок; } .c2 { ширина: 200 пикселей; высота: 220 пикселей; цвет фона: #CCCCCC; отображение: встроенный блок; } .c3 { ширина: 180 пикселей; высота: 210 пикселей; цвет фона: #333333; дисплей: блок; } .обертка { цвет фона: красный; ширина: 500 пикселей; высота: 500 пикселей; отображение: встроенный блок; переполнение: скрыто; }
<дел>C1C2C3