Overcome min-width and max-width CSS on Table Not Working in IE7

February 28th, 2012 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

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.

This entry was posted on Tuesday, February 28th, 2012 at 8:34 pm by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (1)
  1. SleepyBobos says:

    Cheers, helped me understand how to use min\max-width