<table> 元素是否有与“width: auto”等效的 CSS 声明？答案

【问题标题】：Is there an equivalent CSS declaration to "width: auto" for <table> elements?<table> 元素是否有与“width: auto”等效的 CSS 声明？
【发布时间】：2017-01-14 02:08:20
【问题描述】：

我正在尝试创建一个不超过特定宽度（比如说 500 像素）的

，即使有任何大小的边框。

通常，如果我这样做：

(HTML)

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

(CSS)

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

我将得到一个 510px 宽的

，因为左右边框的一半最终会出现在

的外部。我想要的是一个 500px 宽 total 的

（即不超过其父/容器的宽度）。因此，左右边框各为 10px 宽，设置在包含

的 500px 宽内 - 因此表格的剩余内容区域将为 480px。

通过使用 CSS 声明“width:auto”，我可以轻松地对

执行此类操作。我可以通过在其周围添加一个额外的

来伪造它，该

使用“宽度：自动”，边框设置在该

上，而不是

。

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

【问题讨论】：

您使用的是什么 xhtml 声明？我认为严格的声明会导致表格 480px（边框为 20px）
@adam...边框被添加到声明的宽度。
但是table上没有声明宽度——只在包含的div上，所以table+border不能大于500px，只要box模型正确
Tables 与 div 不同，但不会扩展容器的总宽度。它们可以根据需要扩展。所以，我假设 OP 希望表格填满容器，这就是边框 + 宽度问题发挥作用的地方。

【解决方案1】：

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

【讨论】：

很好，简单的答案！我不知道为什么我没有想到 - 但这就是我在这里发帖的原因。 ;-)
有时最简单的答案是最难想到的！

【解决方案2】：

不确定它是否有效，但是...您可以将第一个（左边框）和最后一个（右边框）TD（或者可能是 TR）边框而不是表格本身吗？这应该会产生相同的视觉效果。

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

【讨论】：

感谢您的帮助，DA。安迪的回答实际上最适合我的情况，但我感谢您的意见。

【解决方案3】：

我不知道是否有跨浏览器的解决方案。 IE 框模型实际上按照您想要的方式工作：一旦您声明了元素的宽度，这就是宽度，然后它从元素的“内部”宽度中减去填充边距和边框，从而为您提供声明的宽度。

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

我刚刚在 IE7 和 Firefox 3.5 中测试了您的代码，即使有 10 像素的黑色边框，它们看起来都是 500 像素宽。我担心的是旧版本的 Firefox。

【讨论】：