Safari and Chrome ignore min-width CSS propery

Question

Why do Safari and Chrome ignore min-width CSS property? Example http://jsfiddle.net/8YFHu/2/ This works in IE and Firefox but not in Safari and Chrome.

Solution 1

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.

Solution 2

In my experience, it's often impractical to define widths on td elements. The best workaround I've found for this limitation is to set a min-width on a containing div element for the table.

Comments

[James Allardice]

Set the min-width on the td instead of the table and it should work fine. See the MDN article for more info on support for table: developer.mozilla.org/en/CSS/min-width#Browser_compatibility

[James Allardice]

Update - It appears that Chrome now does support this. I'm not sure since when this is the case, but I just tested it in Chrome 19.

[The Oddler]

I noticed that Chrome seems to support it when setting the min-width to some number of pixels, but doesn't when setting it to a percentage value. Firefox does in both cases.