CODEWITHSUNDEEP
htmlcssscrollbaroverflow
jbyrd
jbyrd

Reputation: 5615

Make Container Expand With Wide Table Beyond Browser Viewport

I have a container, with a table inside. The table has so much content that it expands beyond the browser viewport, causing a horizontal scroll bar. This is actually fine.

The challenge is: while the table expands beyond the viewport, the table's container does not. How do I get the table's container to expand beyond the viewport along with the table?

Here's the basic example code (also in this codepen):

* {
  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>

Upvotes: 1

Views: 174

Answers (2)

Nick
Nick

Reputation: 1422

You can either set the container to have position: absolute or you can set it to have overflow-x: scroll. position: absolute will make the border stretch the entire width of the container, so the entire webpage can be scrolled with a continuous border, while overflow-x: scroll will create the scrollbar in the actual container, rather than the webpage, and put the border around the container.

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>

Upvotes: 1

Dylan Bober
Dylan Bober

Reputation: 1

How do I get the table's container to expand beyond the viewport along with the table?

Try expressing the container width as pixels, inches, etc. in your CSS.

Upvotes: 0

Related Questions