HTML 表在容器内时不符合 tds 的宽度

Question

即使我明确设置了宽度：

<div id='container'>
<table>
<tr>
<td style='width:200px'>bla1</td>
<td style='width:200px'>bla2</td>
<td style='width:200px'>bla3</td>
</tr>
</table>
</div>

我的表格的随机宽度为 183px。如何在不明确设置的情况下使表格获得 600px 宽度？我认为用 td 指定宽度就足够了。请注意，我想将其保留在其宽度为 200px 的容器中并使其滚动。出于某种原因，当我不将其放入容器中时，它可以工作。

注意：我希望它在容器内滚动，而无需手动将表格宽度设置为 600px。这是因为在实践中，我所有的td都会有不同的宽度。

https://jsfiddle.net/foreyez/fzf3tjdu/

Answer 1

您的表格宽度不是 600px 的原因是您的 CSS #container 设置为 200px。将其更改为600px，这将解决您的问题。

编辑： 哎呀，我注意到你说没有指定 600px。 首先从 css 代码中的 #container 中删除 200px 的宽度限制。 接下来，添加：

table {
width: inherit;
}

额外： 超出您的问题范围... 如果需要响应式解决方案，则应考虑查看基于百分比、基于em或其他单位，而不是专门定义像素值。这也与最小宽度/最大宽度:)的潜在用途有关

我希望这有帮助！

Answer 2

我通过为 td 提供 200px 的最小宽度来解决此问题。 出于某种奇怪的原因，当它在容器内时，它需要这个。