我有这样的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"
来防止它,而且它以某种方式起作用了。
所以,我想知道的是--有没有其他方法来解决这个问题?为什么会发生这种情况?
发布于 2012-04-20 16:55:43
用div包装内表,并将max-width设置为这个包装div。
发布于 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">
发布于 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
复制相似问题