6

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; }
TylerH
  • 20,799
  • 66
  • 75
  • 101
Graham
  • 3,217
  • 1
  • 27
  • 29
  • 1
    Apparently IE7 does different things with `max-width` depending on the DTD: http://www.wileymedia.com/weblog/archives/2007/02/maxwidth_and_internet_explorer.html – vcsjones Aug 11 '11 at 15:00
  • Yeah I tried a few different DocTypes to no avail. That article is correct for general block-level elements, but it doesnt fix table. – Graham Aug 11 '11 at 15:32

2 Answers2

11

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/

Syri
  • 671
  • 2
  • 5
  • 11
2

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" );
}
AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • +1 Siiick. I don't usually recommend supporting IE<8 but this is solid. – Maverick Aug 11 '11 at 15:12
  • This doesn't address WebKit. Safari and Chrome will still render the table ignoring the max-width property. If @Graham is truly concerned with cross browser compatibility, a wrapper element is much more elegant. – Syri Aug 11 '11 at 15:16
  • Your answer here works great, but I selected the Bjorn's as "correct" for my situation because the wrapper div is needed anyway really, and those expressions just creep me out. I like your bit about classes on the body with the IE comments though! Thanks! – Graham Aug 11 '11 at 19:25
  • Alien, I just noticed that Firefox doesn't render the [if !IE] section. Any ideas on how to write in the body tag in your example for non-IE browsers? – Graham Aug 23 '11 at 14:58