当Html表在容器

时间:2018-05-25 23:34:58

标签: html css

即使我明确设置了宽度:

<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/

2 个答案:

答案 0 :(得分:0)

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

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

table {
width: inherit;
}

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

我希望这有帮助!

答案 1 :(得分:-1)

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