All geek questions in one place

Why doesn't maximum width work on <table> in IE7?

Why doesn't "maximum width" work with tables in Internet Explorer 7? max-width is available for other elements and seems to work fine, but when it applies to the table, I cannot get it to 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 size of the table is limited to 500px, and the text inside the cells is broken accordingly (between words, as you would expect). In IE7, however, this is typically a "no transfer" has been applied. Each cell is stretched to the necessary with it, without trying to break the text inside the cell, and the whole table is simply stretched, ignoring the max-width rule.

How do I set max-width tables in IE7? (It works fine in Firefox and IE8)

What I tried does not work:

 table { display: block; } td { word-wrap: break-word; } table { table-layout: fixed; }
+6
source share
2 answers

The value of the max-width property for the table is ignored by WebKit browsers, and Chrome and Safari will display the table, ignoring the maximum width, like IE7. I would recommend setting the max-width property for a shell element such as a div .

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

+11
source

Try the following:

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

Unfortunately, this will not be confirmed due to ? . The good news is that this solution is only for IE, you can just make conditional elements when creating the <body> and customize classes specific to IE:

 <!--[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" ); }
+2
source

Source: https://habr.com/ru/post/894845/

More articles:


All Articles