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

user_556449 0
Viewed 110

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

enter image description here

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>

css html
5 Answers

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>

user_28132240

Instead of using overflow:auto in the main container, you can use it in "table-container" class.

.table-container {
  background-color: red; 
  width:100%;
  overflow: auto;
}
user_14905500

Here are the desired changes just replace this

.container {
  overflow: auto;
  width: 100%; // require changes
}

.table-container {
  background-color: red;
  width: 100%; //require chanes
  overflow-x: auto; // require chnages
}

Explain: Let the .container and .table-container expand until where table width goes then overflow-x: auto; for .table-container, it will make scroll only to table but footer will have only width of screen.

user_127038990

Wrapped table-container around footer as well and added width fit content to it.

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

.table-container {
  background-color: red;
  width: fit-content;
}

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>
    <footer>This is footer</footer>
  </div>

</div>

user_143836010

You have to be written in .container that the width should be in auto. By this, you can add more colors and the bgcolor of the table will be increased automatically.

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

.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>

user_176583090
Related