爲什麼這個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樣式只適用於這些表格之一？

回答

相關問題