max-width not working for table-cell

Question

For me, the expected behavior would be that the middle cell fills the whole space horizontally as long as its container is not wider than 500px. However, it doesn't matter how large I scale the page, the middle cell always fills up 100%, ignoring the max-width property, and the chocolate never shows :(

div.container {
    width: 100%;
    display: table;
}
div.container > * {
    display: table-cell;
}
div.middle {
    width: 100%; max-width: 500px;
    background-color: black;
}
div.side {
    width: auto;
    background-color: chocolate;
}

<div class="container">
    <div class="side"></div>
    <div class="middle">.</div>
    <div class="side"></div>
</div>

What causes the problem, and what could be a workaround?

Possible duplicate of http://stackoverflow.com/questions/8465385/how-can-i-set-the-max-width-of-a-table-cell-using-percentages - please check it, might be helpful! — Aziz, Oct 24 '15 at 14:53
The result is exactly the same using the table tag instead of divs. — tom, Oct 24 '15 at 19:18

divy3993 · Accepted Answer · 2015-10-24T21:15:56.413

I guess the reason is quite clear to you now, so i am just going to suggest you a workaround to this. By using display:block/inline-block; instead of display:table/table-cell;.

So the solution is:

div.container {
  width: 100%;
  display: block; /* Changed from display:table; */
}
div.container > * {
  display: inline-block; /* Changed from display:table-cell; */
  float:left; /* Added floating to avoid space between elements */
}
div.middle {
  width: 100%; 
  max-width: 500px;
  background-color: black;
}
div.side {
  width: auto;
  background-color: chocolate;
}

<div class="container">
  <div class="side">Left</div>
  <div class="middle">.</div>
  <div class="side">Right</div>
</div>

Working : Fiddle

Updated Solution:

Found a solution

Going back to tables would work by giving table-layout:fixed; to container.

Working Demo

HTML

<div class="container">
  <div class="side">Left</div>
  <div class="middle">.</div>
  <div class="side">Right</div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.container {
    display:table;
    width:100%;
    height:10px;
    table-layout:fixed;
}
.side, .middle {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
.middle {
    width:500px;
    background:black;
}
.side {
    width : calc(50% - 500px);
    overflow:hidden;
    background:chocolate;
}

@media (max-width: 500px) {
    .side
    {
        display:none;
    }
    .middle
    {
        width:100%;
    }
}

The container should always fill its space horizontally. In case it is wider than 500px, the middle div in it should have its maximal width (500px) and the side divs should be visible to equally fill up the remaining space in the container. If the container is <= 500px, the middle div should fill it entirely so the side divs shouldn't show at all. If max-width worked in my example, this is how it would work I guess, and that's my desired result. — tom, Oct 24 '15 at 19:47
Wonderful! It's a pity that there seems to be no simpler solution for this seemingly small issue and media queries must be used, but I haven't got any other idea either and your example does the trick perfectly so I think I'll implement it like that, thank you. — tom, Oct 24 '15 at 21:47
Yes indeed, but believe this is most simple one for case of yours. Also better and accurate solution can be achieved with JS/JQuery. But with just CSS, this is the most possible solution. — divy3993, Oct 24 '15 at 21:53
I'll just add that I tried using table-layout:fixed; on my table and max-width using percentages did not work. All cells in a row appear to be equal width. I guess I'll give up the table for this, though it was handy for a page to be used for printing. — Michael K, Mar 15 '23 at 15:58

score 6 · Answer 2 · answered Oct 24 '15 at 17:13

6

Thanks Aziz, now I know that max-width shouldn't be used for table cells as

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

Waiting for workarounds...

answered Oct 24 '15 at 17:13

tom

2,137
2
27
51

max-width not working for table-cell

2 Answers2