如何防止CSS錶行擴展到父級高度

我試圖用CSS製作表display:tabledisplay:table-row和display:table-cell。問題是我無法設置表格行的高度。他們擴大到父母身高。在我的代碼中，我將.trow高度設置爲30px，但它們擴展到父高度400px。 !important和內聯樣式也不起作用。我該如何解決這個問題？如何防止CSS錶行擴展到父級高度

P.S對不起，我的英語不好。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .table{ 
      display: table; 
      width: 500px; 
      border: 1px solid #000000; 
      height: 400px; 
     } 
     .trow{ 
      height: 30px; 
      display: table-row; 
      width: 100%; 
      background-color: #444444; 
     } 
     .tcell{ 
      display: table-cell; 
      width: 20%; 
      color: #ffffff; 
     } 
    </style> 
</head> 
<body> 
<div class="table"> 
    <div class="trow" style="height: 30px"> 
     <div class="tcell">I'm table cell</div> 
    </div> 
</div> 
</body> 
</html>

來源

2013-10-18 user2522545

你想達到什麼樣的表的頂部？ –

爲什麼使用display: table，如果你需要非錶行爲？默認表格行爲（如果指定表格高度）是擴大行高，直到整個表格高度被填充。這正是你得到的。

只是刪除所有display屬性和evertything會沒事的。

demo here

來源

2013-10-18 21:48:14

謝謝。現在我刪除所有顯示屬性並將'.tcell'的'display：'屬性設置爲'inline-block'。是工作。 – user2522545

這是一種表單元格的默認行爲。如果你想要單元格不填補空白，你必須提供其他的東西。

我剛纔添加另一行：

<div class="trow tfill"> 
    <div class="tcell"></div> 
</div>

是推動你行

.tfill{ 
    height: 100%; 
    background-color: #fff; 
}

http://jsfiddle.net/vdy4Y/

來源

2013-10-18 22:12:28 Tschitsch

如何防止CSS錶行擴展到父級高度

回答

相關問題