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.