Overcome min-width and max-width CSS on Table Not Working in IE7
Whilst trying to make a screen look better across all resolutions recently, I came across a problem with IE7 when making the page cross-browser compatible. I was trying to add the CSS attribute ‘max-width’ on a table so that it would stop expanding across the entire screen on larger screens.
The table looked something like so:
<table style="width:100%; max-width:300px;"> <tr> <td>Content here...</td> </tr> </table>
As you can see I have a max-width set on the table. However, IE7 seemed to ignore this and the table just continued to expand to 100%. After a little investigation I solved the matter by wrapping an element around the outside of the table, at which point IE7 started to behave.
An example of this can be seen below:
<div style="width:100%; max-width:300px;"> <table style="width:100%;"> <tr> <td>Content here...</td> </tr> </table> </div>
Note that this is the same for when the CSS attribute ‘min-width’ is applied to a table. Wrapping an element around the outside of the table resolves it in this scenario also.
Cheers, helped me understand how to use min\max-width