Chrome, Safari Ignoring Max-Width in Table

Chrome, Safari ignoring max-width in table

Max-width applies to block elements. <table> is neither block nor inline. Ambiguous enough? haha. You can use display:block; max-width:1000px and forget about width:100%. Chrome and Safari follow the rules!

Edit May 2017: please note, this comment was made 7 years ago (in 2010!). I suspect browsers have changed a bunch over the years (I wouldn't know, I no longer do web design). I recommend using a more recent solution.

Safari and Chrome ignore min-width CSS propery

Chrome and Safari simply do not support the min-width property on table elements. They will, however, respect min-width when applied to table cells.

After some quick testing, it appears that support is as follows:

• Firefox: Supported (tested in 5, not sure since which version)
• Internet Explorer: Supported (since IE8. IE7 and below do not seem to support it)
• Chrome: Not supported (all versions as far as I can tell)
• Safari: Not supported (all versions as far as I can tell)
• Opera: Supported (tested in 11.5, not sure since which version)

More information can be found in the MDN article on the property, although the article claims that the property is not supported in IE, even though it is since IE8.

The CSS2.1 specification states that min-width (and max-width for that matter) apply to:

all elements but non-replaced inline elements, table rows, and row
groups

So it would seem that Chrome and Safari are the ones not conforming to the standard.

Edit

Having just looked a bit further down the relevant section of the spec, I noticed it then states:

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.

So it actually looks like no-one got it wrong, and everyone can just do their own thing.

Max-width in the table

You simply need to set the width to 100% also.

div img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

http://jsfiddle.net/samliew/TAE3w/9/

The most consistent effect on all three browsers would be:

div img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

http://jsfiddle.net/samliew/TAE3w/15/

See related questions:

• How do I auto-resize an image to fit a div container
• How do I fit an image (img) inside a div and keep the aspect ratio?

Design a table with exact width for Chrome

As the answer in the other question you linked pointed out, tables are neither block nor inline and max-width only applies to block or replaced elements. So it seems Chrome is working as the html spec says--as unhelpful as that is.

Not sure if it'll help, but max-width does work for td's. Perhaps you can come up with an alternative design that uses that fact.

Why doesn't max-width work on tables in IE7?

The max-width property set for a table is ignored by WebKit browsers, both Chrome and Safari will render the table ignoring the max width as does IE7. I would recommend setting the max-width property to a wrapper element such as a div.

See http://jsfiddle.net/P5YPR/1/

---

Related Topics