当Html表在容器

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＆quot; s指定宽度就足够了。注意我想将它保存在宽度为200px的容器中并让它滚动。出于某种原因，当我不把它放在容器中时它会起作用。

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

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

Answer 1

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

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

table {
width: inherit;
}

附加功能： 超出你问题的范围...... 如果您需要响应式解决方案，则应考虑查看基于百分比，基于em或其他单位，而不是专门定义像素值。这也与min-width / max-width的使用有关：）

我希望这有帮助！

Answer 2

我通过向td提供200px的最小宽度来修复此问题。由于某些奇怪的原因，当它在一个容器内时需要它。