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

Question

Why does "max-width" not work on tables in Internet Explorer 7? max-width is available on other elements, and seems to work fine, but when applies to a table, I can't make it do anything, i.e. the max-width rule is simply ignored.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Foo</title>
</head>
<body>
    <div style="background-color: Red; max-width: 1000px;">
        <table style="background-color: Green; max-width: 500px;">

                <tr>
                    <td><a href="#" class="action view">View</a></td>
                    <td>7/20/2011</td>
                    <td>James Smith</td>
                    <td>345 NW 23rd Ave Gainesville, FL 32606</td>
                    <td>Alachua Blah blah sf jfh jsdhjs fjsh djkf sdjkhk</td>
                    <td>345621</td>
                    <td>Fred Smith</td>
                </tr>
        </table>
    </div>
</body>
</html>

In Firefox, the table is properly constrained to 500px, and the text inside the cells breaks in appropriate ways (between words, just like you'd expect). In IE7 however, it's like the "no-wrap" rule has been applied. Each cell stretches out to its needed with, without trying to break text withing the cell, and the whole table simply stretches out to ignore the max-width rule.

How do I put max-width on a table in IE7? (It works fine in Firefox & IE8)

What I've tried that doesn't work:

table { display: block; }

td { word-wrap: break-word; }

table { table-layout: fixed; }

Syri · Accepted Answer

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/

AlienWebguy · Answer

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" );
}

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

Tags:

html

css

html-table

Graham

2 Answers

Syri

AlienWebguy

Recent Activity

Donate For Us