Why doesn't max-width work on <table>s in IE7?

The max-width property set for a table is ignored by WebKit browsers, both Chrome and Safari will render the table ignoring the max width as does IE7. I would recommend setting the max-width property to a wrapper element such as a div.

See http://jsfiddle.net/P5YPR/1/


Try this: 

table#my_table {
    max-width:500px;
    width:expression(document.body.clientWidth > 500? "500px": "auto" );
}

Unfortunately this won't validate due to the ?. The good news is since it's an IE-only solution you can simply do conditional elements when you create your <body> tag and setup IE-specific classes: 

<!--[if IE 9]><body class="ie9 ie"><![endif]--> 
<!--[if IE 8]><body class="ie8 ie"><![endif]--> 
<!--[if IE 7]><body class="ie7 ie"><![endif]--> 
<!--[if lte IE 6]><body class="ie6 ie"><![endif]--> 
<![if !IE]><body><![endif]>

Now in your CSS: 

table#my_table {
    width:500px;
    max-width:500px;
}

.ie7 table#my_table {
    width:expression(document.body.clientWidth > 500? "500px": "auto" );
}

Tags:

Html

Css

Html Table

Recent Posts