时间戳

首页 > 解决方案 > Html 表格在容器内时不符合 tds 的宽度

html - Html 表格在容器内时不符合 tds 的宽度

问题描述

即使我明确设置了宽度：

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

标签： htmlcss

解决方案

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

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

table {
width: inherit;
}

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

我希望这有帮助！

推荐阅读