为什么max-width在IE7中的< table> s上不起作用? [英] Why doesn't max-width work on <table>s in IE7?
问题描述
为什么最大宽度"在Internet Explorer 7中的表上不起作用? max-width在其他元素上可用，并且似乎可以正常工作，但是当应用于表时，我无法使其执行任何操作，即max-width规则将被忽略.
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>
在Firefox中，表格被适当地限制为500px，并且单元格内的文本以适当的方式中断(在单词之间，就像您期望的那样).但是，在IE7中，就像已应用了禁止包装"规则.每个单元格都按其需要扩展，而不会试图随单元格破坏文本，整个表只是扩展而忽略了max-width规则.
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.
如何将max-width放在IE7中的表上? (它在Firefox和IE8中工作正常)
How do I put max-width on a table in IE7? (It works fine in Firefox & IE8)
我尝试过的方法不起作用:
table { display: block; }
td { word-wrap: break-word; }
table { table-layout: fixed; }
推荐答案
为表设置的max-width属性将被WebKit浏览器忽略，Chrome和Safari都会像IE7一样忽略最大宽度来呈现表.我建议将max-width属性设置为包装元素，例如div.
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.
请参见 http://jsfiddle.net/P5YPR/1/
这篇关于为什么max-width在IE7中的< table> s上不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
