HTML table overflow - how to stretch other content on the page to match the table width

Issue

I have a page with a one large table and a footer. The table doesn't fit horizontally, so there is a scroll bar (which is fine), but the problem is that the footer that is below the table does not stretch to match the table width. See the following CodePen that illustrates the problem:

https://codepen.io/pglazkov/pen/XWEPjvo

How to make the div containing the table (red box) and the footer (green box) match the table width?

Here is the code from the above example:

.container {
  overflow: auto;
  width: 800px;
}

.table-container {
  background-color: red;
}

table {
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
  white-space: nowrap;
}

footer {
  background-color: green;
  min-height: 100px;
}

<div class="container">
  <div class="table-container">
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Company2</th>
        <th>Contact2</th>
        <th>Country2</th>
        <th>Company3</th>
        <th>Contact3</th>
        <th>Country3</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
  </div>

  <footer>This is footer</footer>
</div>

Solution

Wrap the parent element (.table-container and in example <section>) of the <table> around the <table> and the <footer>. The key ruleset is:

/* In example, it is <section> */
.table-container {
  width: max-content; /* Set width to the width of it's content */
}

All block-level elements like <div> and <footer> are width: 100% by default so adding it isn't normally needed.

By setting the parent to the width of it's content at it's fullest extent, the <table> will expand to meet the widths of all of it's <th> and <td> without breaking the text into new lines. Now because the <footer> is naturally width: 100%, it will conform to the parent element's width which in turn is dictated by the width of the <table> via width: max-content of the parent element.

body {
  background-color: blue;
}

main {
  margin: 10px auto;
}

section {
  background-color: red;
  width: max-content;
}

td,
th {
  text-align: left;
  padding: 8px;
  white-space: nowrap;
}

footer {
  min-height: 100px;
  background-color: green;
}

<main>
  <section>
    <table>
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
          <th>Company2</th>
          <th>Contact2</th>
          <th>Country2</th>
          <th>Company3</th>
          <th>Contact3</th>
          <th>Country3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
        </tr>
      </tbody>
    </table>
    <footer>This is footer</footer>
  </section>
</main>

Answered By - zer00ne