Por que a largura máxima não funciona em <table> s no IE7?
Por que "largura máxima" não funciona em tabelas no Internet Explorer 7?max-width está disponível em outros elementos e parece funcionar bem, mas quando se aplica a uma tabela, não consigo fazer nada, ou seja, omax-width regra é simplesmente ignorad
<!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>
No Firefox, a tabela está adequadamente restrita a 500px e o texto dentro das células é dividido de maneira apropriada (entre palavras, como você esperaria). No IE7, no entanto, é como se a regra "sem quebra" fosse aplicada. Cada célula se estende conforme necessário, sem tentar quebrar o texto dentro da célula, e a tabela inteira simplesmente se estende para ignorar omax-width regra.
Como faço para colocarmax-width em uma tabela no IE7? (Funciona bem no Firefox e IE8)
O que eu tentei que não funciona:
table { display: block; }
td { word-wrap: break-word; }
table { table-layout: fixed; }