Chrome，Safari忽略表格中的最大宽度
我有这样的HTML代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
</head>
<body>
<table style="width:100%;">
<tr>
<td>
<table style="width:100%; max-width:1000px; background:#000099;">
<tr>
<td>
001
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> 问题是Chrome和Safari忽略了"max-width:1000px"我的朋友发现我们可以通过为内表添加"display:block"来防止它，而且它以某种方式起作用了。
所以，我想知道的是--有没有其他方法来解决这个问题?为什么会发生这种情况？
回答 4
Stack Overflow用户
发布于 2012-04-20 16:55:43
用div包装内表，并将max-width设置为这个包装div。
Stack Overflow用户
发布于 2012-06-21 21:09:29
我也有同样的问题。我使用表格作为在页面上居中显示内容的方法，但是safari忽略了我应用于表格的样式width:100%; max-width:1200px。我了解到，如果我将表格包装在div中，并在div上自动设置左右边距，它将以页面为中心，并遵循mac上safari和firefox中的max和min width属性。我还没有检查windows上的资源管理器或chrome。下面是一个示例：
<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">然后我将表嵌套在div中...
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">Stack Overflow用户
发布于 2015-02-20 20:24:27
我刚刚发现了这个答案，值得注意的是，根据MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)，他们的最大宽度兼容表是这样写的：
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes) | Not supported | (Yes) | Not supported |"1 CSS 2.1显式地将max-width的行为保留为未定义。因此，任何行为都是CSS2.1兼容的；较新的CSS规范可能会定义此行为，因此Web开发人员现在不应依赖特定的规范。“
不过，MDN上有一些很酷的东西，比如"fill-available“和"fit-content”-当规范稳定并在这方面明确时，我们有一些东西值得期待……
https://stackoverflow.com/questions/4019604
复制相似问题