为什么这个td样式只适用于这些表格之一？

-3

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

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

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

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

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

以下是最新版本的jsfiddle

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

来源

2016-01-22 spraff

为什么你使用'ex'单位？你觉得什么样的造型没有被应用？ – j08691

IIRC'em'用于字体大小调整 - 与'ex'相同。 –

发生了什么事是窗口的宽度不够大，它约束了表宽度。如果我将身宽增加到一个淫秽数字（10000px），它会按照预期呈现。 [**更新的JSFiddle **]（https://jsfiddle.net/40t3nzoh/5/）。考虑使用更多的行和更少的列。 – David

它似乎只喜欢它，因为20em和2EX的选择是“不走运”或桌子太大（例如第一个）。

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

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

这里您缩短了3台，以节省一些工作：

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

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

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

来源

2016-01-22 22:28:41 Linux

好吧，表正试图的空间“太小”，以适应“太多”，你需要使空间更大，我正在为这个例子制作更大的“身体”。

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

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

现在多个320 * 29（该细胞在表与大多数细胞量）= 9280px

现在你知道身体所需的最小宽度至少是9280px。

看到提琴：https://jsfiddle.net/DIRTY_SMITH/40t3nzoh/7/

来源

2016-01-22 22:57:08

为什么这个td样式只适用于这些表格之一？

回答

相关问题