为什么这种 td 样式只适用于这些表之一？答案

【问题标题】：Why does this td style only apply to one of these tables?为什么这种 td 样式只适用于这些表之一？
【发布时间】：2016-01-23 07:50:26
【问题描述】：

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

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

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

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

~~这是它在 Ubuntu 上的 Firefox 42.0 中的呈现方式。~~

编辑：结合 Pangloss 的建议给了我一个可以工作的版本 in JSFiddle 但不是作为一个独立的网页。

这是最新版本在 JSFiddle 中的呈现方式

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

【问题讨论】：

你为什么使用ex单位？你觉得没有应用的样式怎么办？
IIRC em 用于字体大小 - 与 ex 相同。
发生的情况是窗口的宽度不够大，它限制了表格的宽度。如果我将正文宽度增加到一个淫秽的数字（10000 像素），它会按预期呈现。 Updated JSFiddle。考虑使用更多的行和更少的列。
只是顺便说一下我真的很喜欢你的灰色调色板。
等一下，窗口的宽度不应该限制它，因为它是水平滚动的，对吧？

标签： html css

【解决方案1】：

好的，桌子试图在“太小”的空间中容纳“太多”，你需要让空间更大，我在这个例子中让“身体”更大。

首先，将字体大小设置为 16 像素，折叠单元格的边框并移除正文的边距。使数学易于理解。

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

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

现在您知道正文的最小宽度需要至少为 9280 像素。

见小提琴：https://jsfiddle.net/DIRTY_SMITH/40t3nzoh/7/

【讨论】：

【解决方案2】：

似乎只是因为选择 20em 和 2ex 是“不吉利”或桌子太大（例如第一个）。

从 2ex 的高度开始。只是选得太小了，大约是字母的高度。试着把它改成 1em，你看不出有什么不同，但是如果你把它改成 3em 你会注意到它，因为现在它比字母的大小还要大。第一个表也是如此，因为它有几行大，不能再小，不能应用 2em。

现在关于 20 点。感觉它只适用于第二个表，因为它是唯一一个小到浏览器实际上有空间扩展表的地方。如果您使用第一个和第三个表并删除每个表数据 (td)，您会看到巨大的差异，假设两个除外。

这是您缩短的第三张桌子以节省一些工作：

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

除了第一个表。浏览器再次尝试在不影响内容的情况下获取屏幕上的所有数据（例如让它重叠）。现在他这样做了，并使用了他必须显示的所有空间来显示表格内容，并决定只削减您告诉他添加的其余空间（使用 20em）。如果您有 2 个屏幕，尝试将浏览器窗口拉过两个屏幕，您会注意到浏览器使用的空间越来越多，直到他也有足够的空间来显示 20em。

希望我能帮上忙！（顺便说一下，看看外部 css，对保持代码干净有很大帮助 Link how to include a css file externally :)

【讨论】：