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.