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

Question

У меня есть контейнер со столом внутри. В таблице так много контента, что она выходит за пределы окна просмотра браузера, вызывая горизонтальную полосу прокрутки. Это на самом деле хорошо .

Проблема в том, что, хотя таблица выходит за пределы области просмотра, контейнер таблицы не . Как заставить контейнер таблицы расширяться за пределы области просмотра вместе с таблицей?

Вот базовый пример кода (также в этот код ручки ):

* {
  box-sizing: border-box;
}

th {
  white-space: nowrap;
}

.container {
  border: 5px solid blue;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>column 1 really long heading</th>
        <th>column 2 really long heading</th>
        <th>column 3 really long heading</th>
        <th>column 4 really long heading</th>
        <th>column 5 really long heading</th>
        <th>column 6 really long heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

Вы можете установить контейнер на position: absolute или overflow-x: scroll.position: absolute сделает границу растянутой на всю ширину контейнера, поэтому всю веб-страницу можно прокрутить непрерывной границей, тогда как overflow-x: scroll создаст полосу прокрутки в реальном контейнере, а не на веб-странице, и поместит границу вокругконтейнер.

position: absolute:

* {
  box-sizing: border-box;
}

th {
  white-space: nowrap;
}

.container {
  border: 5px solid blue;
  position: absolute;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>column 1 really long heading</th>
        <th>column 2 really long heading</th>
        <th>column 3 really long heading</th>
        <th>column 4 really long heading</th>
        <th>column 5 really long heading</th>
        <th>column 6 really long heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
      </tr>
    </tbody>
  </table>
</div>

overflow-x: scroll:

* {
  box-sizing: border-box;
}

th {
  white-space: nowrap;
}

.container {
  border: 5px solid blue;
  overflow-x: scroll;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>column 1 really long heading</th>
        <th>column 2 really long heading</th>
        <th>column 3 really long heading</th>
        <th>column 4 really long heading</th>
        <th>column 5 really long heading</th>
        <th>column 6 really long heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

Как заставить контейнер таблицы расширяться за пределы области просмотра вместе с таблицей?

Попробуйте выразить container width как пиксели, дюймы и т. Д. В вашемCSS.