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>

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

注意:我希望它在容器内滚动，而无需手动将表格宽度设置为 600 像素。这是因为实际上我所有的 td 都将具有不同的宽度。

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

Answer 1

您的表格不是 600 像素宽的原因是因为您的 #container CSS 设置为 200 像素。将其更改为 600px 即可解决您的问题。

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

table {
width: inherit;
}

额外内容:在你的问题范围之外......如果您想要一个响应式解决方案，您应该考虑研究基于百分比、基于 em 或其他单位而不是专门定义像素值。这也与 min-width/max-width 的潜在用途有关 :)

希望对您有所帮助!