Q

TR上的設置高度與TD上的高度不同。爲什麼？

2017-08-01 157 views 0 likes

0

我不明白這兩個HTML片段之間的不同的行爲：TR上的設置高度與TD上的高度不同。爲什麼？

<!DOCTYPE HTML><html><body> 
<TABLE style='border:1px solid black'> 
<TR> 
    <TD style='height:100px'><div style='width:100px;height:100%;background-color:#ccc'></div></TD> 
</TR> 
</TABLE> 
</body></html>

JFiddle：https://jsfiddle.net/ceyq6n10/

和

<!DOCTYPE HTML><html><body> 
<TABLE style='border:1px solid black'> 
<TR style='height:100px'> 
    <TD><div style='width:100px;height:100%;background-color:#ccc'></div></TD> 
</TR> 
</TABLE> 
</body></html>

JFiddle：https://jsfiddle.net/hmjvu5gf/

在第一個例子，DIV垂直擴展到TD高度的100％。在第二種情況下，即使TD具有正確的垂直尺寸，DIV的高度爲0.

請您解釋一下爲什麼？謝謝

2017-08-01 Niente0

A

回答

2

您使用height: 100%爲<div>，但沒有指定高度父<td>。如果未明確指定包含塊的高度（即，它取決於內容高度），並且此元素沒有絕對定位，則使用的高度計算爲指定了'auto'。

css spec about height calculation

所以，當你使用％用於設置高度或寬度，始終設置父元素的寬度/高度爲好。

2017-08-01 13:56:09

0

通過調整單元格大小，我們可以控制行高。

2017-08-01 13:37:53 Nathan

0

您應該將這樣的樣式規則應用於容納像文本或其他html一樣的實際內容的容器。在這種情況下，你td是內容的實際容器。

對於tr標籤，只能將tr或td放入tr中，而不是實際的內容。屏幕空間的樣式適用於實際內容容器（如td，th）的標籤，或者實際上它們本身可以佔用屏幕空間。 tr是更多的行去標記。你可以將背景顏色這樣的東西應用於tr，它可以用於td。將屏幕空間規則應用於更具體的內容容器。

2017-08-01 13:45:00 Amit

相關問題