对于<table>元素，是否存在与“width：auto”等效的CSS声明？

我试图创建一个<表>，不超过一定的宽度（比方说500px），即使有任何尺寸的边框。对于<table>元素，是否存在与“width：auto”等效的CSS声明？

通常情况下，如果我这样做：

（HTML）

<div> 
    <table> 
    <tr> 
     <td>This is a test.</td> 
    </tr> 
    </table> 
</div>

（CSS）

div { 
    width: 500px; 
} 
table { 
    width: 100%; 
    border: 10px solid #000; 
}

我要结束了一个<表e >即510px宽，因为左右边界的一半将最终在<div>的外部。我想要的是<表> 500px宽总数（即，它不超过其父/容器的宽度）。因此，左右边框的宽度均为10px，在500px宽的范围内设置，其中包含<div> - 因此表格的剩余内容区域将为480px。

通过使用CSS声明“width：auto。”，我可以很容易地将这种类型的东西带到<div>。我可以通过添加一个额外的<div>围绕它使用“宽度：自动”与边框设置<div>，而不是<表>表。

但是，我希望存在一个更优雅的解决方案（必须跨浏览器）。有没有我不知道的东西？

2009-10-26 Bungle

您使用的是什么xhtml声明？我认为一个严格的声明会导致一个480px的表格（边界为20px） – 2009-10-26 17:20:08

@adam ...将边框添加到声明的宽度。 – 2009-10-26 17:24:35

但是表格中没有声明的宽度 - 只在包含div上，所以只要框模型正确，表格+边框不能大于500px – 2009-10-26 17:27:50

将div设置为480px宽，并在其上放置10px边框。然后将表格设置为100％宽度

2009-10-26 22:15:02

伟大的，简单的答案！我不知道为什么我没有想到 - 但这就是我在这里发布的原因。 ;-) – Bungle 2009-10-27 13:26:14

有时候最简单的答案是最难以想象的答案！ – 2009-10-27 16:41:44

不知道它是否可以工作，但是......你可以将第一个（左边界）和最后一个（右边界）TD（或TR可能）而不是表格本身作为边界吗？这应该给出相同的视觉效果。

否则，我不会在包装DIV上失去太多睡眠。

2009-10-26 17:25:39

感谢您的帮助，DA。 Andy的回答实际上在我的情况下效果最好，但我很欣赏你的意见。 – Bungle 2009-10-27 13:28:19

我不知道是否有跨浏览器的解决方案。 IE框模型的工作方式实际上是你想要的：一旦你声明了一个元素的宽度，那就是宽度，然后它从元素的“内部”宽度中减去填充边界和边界，以给出你声明的宽度。

所有其他浏览器的做法相反：它们将元素宽度设置为声明的宽度，然后添加边距填充和边框。

我刚刚在IE7和Firefox 3.5中测试了您的代码，即使使用10px黑色边框，它们的宽度也都是500px。这是我担心的老版本的Firefox。

2009-10-26 17:26:35 tahdhaze09

回答