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.
I know this has been answered for a while and with a working workaround, but the answer stating that max-width
only applies to block elements and citing a source that's not the spec is completely incorrect.
The spec (the CSS 3 spec for CSS Intrinsic & Extrinsic Sizing refers to the CSS 2.1 spec on this rule) clearly states:
all elements but non-replaced inline elements, table rows, and row groups
which would mean it should apply to table elements.
It means that WebKit's behavior of not honoring max-width
or min-width
on table elements is incorrect.
I think what you're looking for here is:
table-layout: fixed
Apply this style to the table and your table will respect the width you assign to it.
Note: Applying this style directly in Chrome
will look like it is not working. You need to apply the style in your CSS / HTML
file and refresh the page.
Wrap inner table with div and set max-width to this wrapping div.
I had the same issue. I used a table as a means to center my content on the page, but safari ignored width:100%; max-width:1200px
as a style I applied to the table. I learned that if I wrap the table in a div and set left and right margins on auto on the div, it would center on the page and obey the max and min width attributes in safari and firefox on the mac. I have yet to check explorer or chrome on windows. Here is an example:
<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">
Then I nested the table inside the div...
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">