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)

No comments have been left yet. Be the first