在HTML中設置table的高度一直是一個比較麻煩的問題。如果你不設置高度,那么當table中的內容太多時,它將會撐滿整個頁面而導致頁面出現滾動條。如果你設置了固定高度,那么在table中內容很少時,它依然占據相同的高度,導致頁面布局不美觀。所以,我們需要使用一種方法讓table高度自適應。
table {
display: block;
height: auto;
overflow: auto;
}
在上面的代碼中,我們設置了table的display屬性為block,這樣就可以使table像其他塊級元素一樣。然后我們將高度設置為auto,即高度由內容自適應而定。
當內容過多時,我們需要設置table的overflow屬性為auto,這樣可以在內容過多時出現滾動條以便用戶瀏覽。
此外,我們還可以使用CSS樣式來調整table中每一行的高度。
tr {
height: 40px;
}
在上面的代碼中,我們將每一行的高度設為了40像素。你也可以根據自己的需求設置不同的高度。
總之,使用這種方法可以讓table高度自適應,不管內容多少都可以自動調整高度,使頁面布局更美觀。
下一篇css中區域模塊