Сделать таблицу горизонтальной прокручиваемой

Я ищу способ показать таблицу с горизонтальной полосой прокрутки. Я думал, что это так же просто, как поставить div вокруг стола со следующими свойствами:

.table-wrapper {
    overflow-x: scroll;
    width: 100%;
}

Но, к сожалению, это не работает. table-wrapper исчезает за кадром: https://codepen.io/studiojw/pen/MWrXGdw

не заворачивайте, сделайте это

Dean Van Greunen 10.04.2022 19:35

Ваша обертка в порядке, проблема в .content. Заполняет всю ширину. Добавьте максимальную ширину, и вы увидите, что таблица-обертка работает.

ColdIV 10.04.2022 19:37
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
2
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не могли бы вы проверить это

добавить overflow-x: hidden; в .content

*, 
*::before,
*::after{
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    min-height: 100vh;
    margin: 0;
}

.wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
}

.content {
    flex-grow: 1;
    border: 2px solid blue;
    overflow-x: hidden;
}

.table-wrapper {
    overflow-x: scroll;
    width: 100%;
    border: 2px solid green;
}

table {
    border: 2px solid red;
}

.nav {
    background: #eee;
    height: 100%;
    flex: 0 0 300px;
}

td {
    padding: 0.5rem;
    min-width: 25rem;
}
<div class="wrapper">
      <div class="nav"></div>
      <div class="content">
        <div class="table-wrapper">
          <table>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

Другие вопросы по теме