为什么这个td样式只适用于其中一个表？

Question

我有一些像这样的HTML表格。

td
{
    width: 20em;
    height: 2ex;
}

有关详细信息，请参阅this fiddle。此源通过W3验证器，没有错误或警告。

页面中有三个表格。只有第二个似乎应用了这种风格。这是为什么？

以下是它在Ubuntu上的Firefox 42.0中呈现的方式。

编辑：加入Pangloss的建议给了我一个版本in JSFiddle但不作为一个独立的网页。

以下是最新版本在JSFiddle

中呈现的方式

以下是它在同一浏览器中呈现为具有相同源的独立网页的方式。在这个版本中，第一个和第二个表是好的，但第二个表的单元格太宽。 这发生了怎么回事？

Answer 1

好吧，桌子正在试图适应太多＆＃34;在＆＃34;太小＆＃34;对于空间，你需要让空间更大，我正在制造＆＃34;身体＆＃34;这个例子更大。

首先，将font-size设置为16px，折叠单元格上的边框并删除正文上的边距。为了使数学易于理解。

由于em是字体的相对大小。取16 * 20（20 em）= 320。

现在多个320 * 29（表中单元格数量最多的单元格数量）= 9280px

现在您知道身体的最小宽度需要至少为9280px。

请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/40t3nzoh/7/

Answer 2

它似乎只是因为20em和2ex的选择是＆＃34;运气不好＆＃34;或者表太大（例如第一个）。

从2ex的高度开始。它只是选择得太小，它大约是字母的高度。尝试将其更改为1em，您没有看到任何区别，但如果您将其更改为3em，您会注意到它，因为现在它比字母大小更大。 同样适用于第一个表格，因为它是几行大而且它不能更小，2em无法应用。

现在关于20em。 感觉它只适用于第二个表，因为它是唯一一个如此小的浏览器实际上有空间扩展表。 你可以看到一个巨大的差异，如果你拿第一个和第三个表并删除每个表数据（td），除了，让我们说两个。

这里是缩短的第3张表，以节省一些工作：

＆＃13;

＆＃13;

<table><tbody>
<tr>
	<td style="background:#351e1c">Kurotobi</td><td style="background:#374231">Sensaimidori</td></tr>
<tr>
	<td style="background:#614e6e">Futaai</td><td style="background:#6b9362">Wakatake-iro</td></tr>
<tr>
	<td style="background:#913228">Benitobi</td><td style="background:#97645a">Umenezumi</td></tr>
<tr>
	<td style="background:#c3272b">Akabeni</td><td style="background:#c57f2e">Kuwazome</td></tr>
<tr>
	<td style="background:#ffa631">Tamago-iro</td><td style="background:#ffb94e">Hanaba-iro</td></tr>
</tbody></table>

＆＃13;

＆＃13;

＆＃13;

除了第一张表。浏览器再次尝试获取屏幕上的所有数据而不影响内容（例如让它重叠）。 现在他这样做，并利用他所有的空间来显示表格内容，并决定只剪切你告诉他要添加的剩余空间（使用20em）。 如果您有2个屏幕，请尝试在两个屏幕上拉动浏览器窗口，您会注意到浏览器使用的空间越来越大，直到他有足够的空间来显示20em。

希望我能帮忙！ （顺便说一下看看外部的css，有助于保持代码清洁 Link how to include a css file externally：）