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.
Why is Safari ignoring min-width and text-align?
I duplicated the result.
I saw the text on the Left
side of the window in Safari version 5.1.8 on a MAC.
I removed the min-
from the width call and it shows up correctly on the right now..
http://jsfiddle.net/U87aK/2/
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.
Overwrite CSS min-width on image in Safari/Chrome
The following should work.
min-width: initial!important;
min-width on a table working on the latest of latest IE, Chrome, FF for windows but not Safari 5.1.7
I check BrowserStack today, and it does work with 6.
Related Topics
How to Have a Horizontal Multiple Colour Gradient on Text Using CSS3/HTML 5
Special Characters in CSS Selectors
Bootswatch Theme in Shiny Flexdashboard R
CSS Animation on Hover Stay at Last Keyframe When Using Transform: Rotate
CSS Drop Down Navigation, 3Rd Level Issue
How to Vertically Centralize a Bootstrap V4 Modal with CSS
Pseudo Element Not Aligning at Top Left Corner
Sap.Ui.Table.Table: Visiblerowcountmode="Auto" Not Working with Vbox (Flexbox)
Why Is "-Fx-Background-Radius: 10;" Not Working
How to Remove the Arrow in Dropdown in Bootstrap 4
What Is Appropriate Ordering of CSS Selector? Eg P.Class or .Class P
Table Cells Height Calculated Differenly in Ie11
Set the Width of Children to Fill the Parent
Two Fixed Width Full Height Columns, with Seamless Transition to Blank Space
How to Set the Transform Origin to a Specific Point on the Element
Why the :Before and :After Pseudo-Elements Work Only in Firefox
How to Add Additional Information to an Attribute Selector via Nesting in SASS