对于＆lt; table＆gt;是否有等效的CSS声明为“width：auto”元素？

StackOverflow https://stackoverflow.com/questions/1625999

  •  06-07-2019
  •  | 
  •  

题

我正在尝试创建一个＆lt; table＆gt;不超过一定宽度（假设为500px），即使是任何大小的边框。

通常，如果我这样做：

<强> （HTML） 

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

<强> （CSS） 

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

我最终会得到一个＆lt; table＆gt;这是510px宽，因为左边和右边的一半将最终在＆lt; div＆gt;的外面。我想要的是＆lt; table＆gt;即500px宽总（即，不超过其父/容器的宽度）。因此，左边框和右边框各自为10px宽，设置在包含＆lt; div＆gt;的500px宽范围内。 - 因此表格的剩余内容区域为480px。

我可以轻松地将此类事情发送到＆lt; div＆gt;使用CSS声明“width：auto。”我可以通过添加额外的＆lt; div＆gt;来伪造它。在它周围使用“width：auto”边框设置在＆lt; div＆gt;上，而不是＆lt; table＆gt;。

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

有帮助吗？

解决方案

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

其他提示

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

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

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top