Container doesn't take the whole horizontal space

Question

I've a basic layout composed by a single column that contains two sections: the first one is only text and the second one is a table.

Here the code:

.container {
  background-color: lightred;
}

.first-section {
  border: 2px solid steelblue;
  width: 100%;
}

.second-section {
  border: 2px solid tomato;
  width: 100%;
}

/* TABLE */
table {
}

thead {
  background-color: black;
  color: white;
}

tbody, tr, td {
  border: 1px solid black;
}

.cell-first-column {
  width: 200px;
  height: 70px;  
}

.cell, th {
  width: 100px;
  height: 70px;
}

.td-cell {
  height: 70px;
  border: 1px solid black;
}

.chart {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0
}

.chart-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gold;
}

.cell-text {
  z-index: 10;
}

<div class="container">
  <div class="first-section">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit mi, tristique nec pharetra hendrerit, egestas id elit. Proin suscipit sapien urna, id tempus ipsum consectetur ut. Praesent at consequat nisl, at pretium risus. Mauris varius hendrerit semper. Maecenas erat erat, congue id semper dictum, dignissim sed dui. Suspendisse pellentesque lorem quis tellus elementum, non fermentum diam consequat. In aliquet justo et faucibus malesuada. Nunc vestibulum nibh non justo tristique, sit amet sollicitudin neque volutpat. Curabitur elementum, neque vitae blandit luctus, augue nisi sollicitudin lectus, sed fringilla turpis sapien quis ex. Aliquam mattis vel est consequat pretium. Etiam eleifend in mauris ut pharetra. Integer eget leo dolor. Aliquam tellus ligula, hendrerit eu sem eget, scelerisque eleifend quam. Suspendisse potenti.
Curabitur pellentesque lacus nulla, eu pharetra orci cursus non. In commodo justo nec facilisis ultricies. Maecenas vel tincidunt neque, pretium auctor tellus. Morbi ornare diam malesuada imperdiet tempor. Suspendisse faucibus diam dictum, consectetur turpis sed, ullamcorper ante. Vivamus imperdiet tincidunt nulla vel blandit. Proin dictum tortor sapien, id ullamcorper nisl fermentum sed. Pellentesque vestibulum placerat nisl quis sodales. Nunc ultricies mauris porta sollicitudin vulputate. Sed non quam velit. Morbi est diam, lobortis at eleifend sed, porttitor quis ipsum. Quisque eu auctor libero.
  </div>
  
  <div class="second-section">
    <table cellpadding="0">
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
          <th>Number</th>
          <th>Color</th>
        </tr>
      </thead>

      <tr>
        <td><div class="cell-first-column">Alfreds Futterkiste</div></td>
        <td><div class="cell">Maria Anders</div></td>
        <td><div class="cell">Germany</div></td>
        <td><div class="cell">1234567</div></td>
        <td><div class="cell">red</div></td>
      </tr>
      <tr>
        <td><div class="cell-first-column">Centro comercial</div></td>
        <td><div class="cell">Francisco Chang</div></td>
        <td><div class="cell">Mexico</div></td>
        <td><div class="cell">1234567</div></td>
        <td><div class="cell">blue</div></td>
      </tr>

      <tr>
        <td><div class="cell-first-column">Opla</div></td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 90%"></div>
            <div class="cell-text">Charles Boule</div>
          </div>
        </td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 30%"></div>
            <div class="cell-text">France</div>
          </div>
        </td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 50%"></div>
            <div class="cell-text">1234567</div>
          </div>
        </td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 70%"></div>
            <div class="cell-text">yellow</div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

The first section (the text) should always occupy all the available space and this does not happen when the table is larger than the width of the window and therefore the horizontal scroll appears.

This is ok:

This is not ok because there is some white space at the right if the text, the container should instead be as wide as the available space:

How can I fix it?

Does this answer your question? [100% width table overflowing div container](https://stackoverflow.com/questions/6601148/100-width-table-overflowing-div-container) — Diego D, Sep 16 '22 at 09:11
quoting the answer reported above (duplicate).. just add `table-layout: fixed; width: 100%;` to your table style and it won't overflow its container — Diego D, Sep 16 '22 at 09:12
@diegod, thanks but it seems not to work and I don't won't that the table overflows its container but that the first section width it's the same of the table.. is that possible? — whitecircle, Sep 16 '22 at 09:17
do you mean that when the table isn't bigger than the container it should not take 100% of the width? In that case use `table-layout: fixed;max-width: 100%;`. Is it correct? — Diego D, Sep 16 '22 at 09:19
No I mean that is the table that choose the entire width size. If the table if wider than the container, the container should be as wide as the table — whitecircle, Sep 16 '22 at 09:21
@whitecircle... or maybe you wanted the table to rule the width and make the first section as large as the table whatever it's its size.. that's another story then. It requires you do the html differently.. it's not only a matter of style. — Diego D, Sep 16 '22 at 09:22
@diego exactly! Mmm what do you suggest to me? how can I modify the code? Maybe I have to use a grid instead of table.. The goal is to have a "table" with fixed cells min-width and fixed height but the number of rows and columns can be variable — whitecircle, Sep 16 '22 at 09:25
Does this answer your question? [Table overflowing outside of div](https://stackoverflow.com/questions/2259189/table-overflowing-outside-of-div) — MaxiGui, Sep 16 '22 at 09:41
@MaxiGui no, the problem is different. but thank you for the reply — whitecircle, Sep 16 '22 at 09:43
If you adapt your container to your table it won't fit, because what do you if the table is 10 times larger than the screen ? you horizontal scroll forever ? What do you with your other elements on the page ? User will be lost. So you try to implement bad practice, just saying... and btw, just set `min-width:100%;` instead of `width:100%` but I advice you to set `max-width:100vw` or similar — MaxiGui, Sep 16 '22 at 09:53
@whitecircle yes I didn't mean to evade from the question just saying that you should change the html... I just threw a stone saying that maybe was a matter of html.. but yet it's not very clear to me how to extend the width of the first section so that it takes the whole parent container ruled by the table width and on the contrary just take the whole 100% while the table should just remain its own size when this one doesn't overflow the screen width. It requires some trials that I'll report here in case I'll get the right solution — Diego D, Sep 16 '22 at 09:55

richtea · Answer 1 · 2022-09-16T14:41:03.867

I think your problem is actually that the table "can" overflow the width of the body, e.g. If your screen width is less than the table width, the table just stays the same, whereas your first container is constrained to the full width of the HTML body.

To get around this either add a css property of 'overflow: auto', to the table element, OR create some responsive rules via media queries to decide what to do with the table one you reach a certain screen width.

I've added the overflow auto fix to your snippet below. You should now see that when the screen width is less than the table, it cuts off the overflowing part of the table, but you can still scroll horizontally to see it.

.container {
  background-color: lightred;
}

.first-section {
  border: 2px solid steelblue;
  width: 100%;
}

.second-section {
  overflow: auto;
  border: 2px solid tomato;
  width: 100%;
}

/* TABLE */
table {
  overflow: auto;
}

thead {
  background-color: black;
  color: white;
}

tbody, tr, td {
  border: 1px solid black;
}

.cell-first-column {
  width: 200px;
  height: 70px;  
}

.cell, th {
  width: 100px;
  height: 70px;
}

.td-cell {
  height: 70px;
  border: 1px solid black;
}

.chart {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0
}

.chart-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gold;
}

.cell-text {
  z-index: 10;
}

<div class="container">
  <div class="first-section">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit mi, tristique nec pharetra hendrerit, egestas id elit. Proin suscipit sapien urna, id tempus ipsum consectetur ut. Praesent at consequat nisl, at pretium risus. Mauris varius hendrerit semper. Maecenas erat erat, congue id semper dictum, dignissim sed dui. Suspendisse pellentesque lorem quis tellus elementum, non fermentum diam consequat. In aliquet justo et faucibus malesuada. Nunc vestibulum nibh non justo tristique, sit amet sollicitudin neque volutpat. Curabitur elementum, neque vitae blandit luctus, augue nisi sollicitudin lectus, sed fringilla turpis sapien quis ex. Aliquam mattis vel est consequat pretium. Etiam eleifend in mauris ut pharetra. Integer eget leo dolor. Aliquam tellus ligula, hendrerit eu sem eget, scelerisque eleifend quam. Suspendisse potenti.
Curabitur pellentesque lacus nulla, eu pharetra orci cursus non. In commodo justo nec facilisis ultricies. Maecenas vel tincidunt neque, pretium auctor tellus. Morbi ornare diam malesuada imperdiet tempor. Suspendisse faucibus diam dictum, consectetur turpis sed, ullamcorper ante. Vivamus imperdiet tincidunt nulla vel blandit. Proin dictum tortor sapien, id ullamcorper nisl fermentum sed. Pellentesque vestibulum placerat nisl quis sodales. Nunc ultricies mauris porta sollicitudin vulputate. Sed non quam velit. Morbi est diam, lobortis at eleifend sed, porttitor quis ipsum. Quisque eu auctor libero.
  </div>
  
  <div class="second-section">
    <table cellpadding="0">
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
          <th>Number</th>
          <th>Color</th>
        </tr>
      </thead>

      <tr>
        <td><div class="cell-first-column">Alfreds Futterkiste</div></td>
        <td><div class="cell">Maria Anders</div></td>
        <td><div class="cell">Germany</div></td>
        <td><div class="cell">1234567</div></td>
        <td><div class="cell">red</div></td>
      </tr>
      <tr>
        <td><div class="cell-first-column">Centro comercial</div></td>
        <td><div class="cell">Francisco Chang</div></td>
        <td><div class="cell">Mexico</div></td>
        <td><div class="cell">1234567</div></td>
        <td><div class="cell">blue</div></td>
      </tr>

      <tr>
        <td><div class="cell-first-column">Opla</div></td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 90%"></div>
            <div class="cell-text">Charles Boule</div>
          </div>
        </td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 30%"></div>
            <div class="cell-text">France</div>
          </div>
        </td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 50%"></div>
            <div class="cell-text">1234567</div>
          </div>
        </td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 70%"></div>
            <div class="cell-text">yellow</div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

if I run your snippet, the table overflows the container.. did I get the question wrong or does the answer not solve the issue? — Diego D, Sep 16 '22 at 09:21
@diegod you're right. the posted code doesn't solve the problem — whitecircle, Sep 16 '22 at 09:22

KASH · Answer 2 · 2022-09-16T10:03:30.700

It is because you are giving fixed value for the .cell width, which it lets only to use that width only from the container. Instead, I recommend: remove the width: 100px; from the .cell And include width:100%; to the table { } and it works like a charm. This is your corrected code link https://jsfiddle.net/hky1dgt8/

<style>.container {background-color: lightred;}
.first-section {border: 2px solid steelblue; width: 100%;}
.second-section {border: 2px solid tomato;width: 100%;}
/* TABLE */
table {
width:100%;
}
thead {
background-color: black;
color: white;
}

tbody, tr, td {
border: 1px solid black;
}

.cell-first-column {
width: 200px;
height: 70px;  
}

.cell, th {
/*   width: 100px;*/  
height: 70px;
}

.td-cell {
height: 70px;
border: 1px solid black;
}

.chart {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0
}

.chart-inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gold;
}

.cell-text {
z-index: 10;
}</style>
<div class="container"><div class="first-section">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit mi, tristique nec pharetra hendrerit, egestas id elit. Proin suscipit sapien urna, id tempus ipsum consectetur ut. Praesent at consequat nisl, at pretium risus. Mauris varius hendrerit semper. Maecenas erat erat, congue id semper dictum, dignissim sed dui. Suspendisse pellentesque lorem quis tellus elementum, non fermentum diam consequat. In aliquet justo et faucibus malesuada. Nunc vestibulum nibh non justo tristique, sit amet sollicitudin neque volutpat. Curabitur elementum, neque vitae blandit luctus, augue nisi sollicitudin lectus, sed fringilla turpis sapien quis ex. Aliquam mattis vel est consequat pretium. Etiam eleifend in mauris ut pharetra. Integer eget leo dolor. Aliquam tellus ligula, hendrerit eu sem eget, scelerisque eleifend quam. Suspendisse potenti.Curabitur pellentesque lacus nulla, eu pharetra orci cursus non. In commodo justo nec facilisis ultricies. Maecenas vel tincidunt neque, pretium auctor tellus. Morbi ornare diam malesuada imperdiet tempor. Suspendisse faucibus diam dictum, consectetur turpis sed, ullamcorper ante. Vivamus imperdiet tincidunt nulla vel blandit. Proin dictum tortor sapien, id ullamcorper nisl fermentum sed. Pellentesque vestibulum placerat nisl quis sodales. Nunc ultricies mauris porta sollicitudin vulputate. Sed non quam velit. Morbi est diam, lobortis at eleifend sed, porttitor quis ipsum. Quisque eu auctor libero.</div><div class="second-section">

<table cellpadding="0">
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
      <th>Number</th>
      <th>Color</th>
    </tr>
  </thead>

  <tr>
    <td><div class="cell-first-column">Alfreds Futterkiste</div></td>
    <td><div class="cell">Maria Anders</div></td>
    <td><div class="cell">Germany</div></td>
    <td><div class="cell">1234567</div></td>
    <td><div class="cell">red</div></td>
  </tr>
  <tr>
    <td><div class="cell-first-column">Centro comercial</div></td>
    <td><div class="cell">Francisco Chang</div></td>
    <td><div class="cell">Mexico</div></td>
    <td><div class="cell">1234567</div></td>
    <td><div class="cell">blue</div></td>
  </tr>

  <tr>
    <td><div class="cell-first-column">Opla</div></td>
    <td class="td-cell">
      <div class="chart">
        <div class="chart-inner" style="height: 90%"></div>
        <div class="cell-text">Charles Boule</div>
      </div>
    </td>
    <td class="td-cell">
      <div class="chart">
        <div class="chart-inner" style="height: 30%"></div>
        <div class="cell-text">France</div>
      </div>
    </td>
    <td class="td-cell">
      <div class="chart">
        <div class="chart-inner" style="height: 50%"></div>
        <div class="cell-text">1234567</div>
      </div>
    </td>
    <td class="td-cell">
      <div class="chart">
        <div class="chart-inner" style="height: 70%"></div>
        <div class="cell-text">yellow</div>
      </div>
    </td>
  </tr>
</table>

What do you need further to this? So, I can modify my answer. — KASH, Sep 16 '22 at 09:52

Container doesn't take the whole horizontal space

2 Answers2