2013-10-22 66 views
13

基本上,我想爲我的表有一個最小高度,所以它可以響應地調整它自己的手段。這在Chrome中運行得很漂亮,但它確實不喜歡FireFox,嘗試過display:block;但這會讓事情變得更糟。在Firefox中的表最小高度不工作

謝謝。

.table-wrap { 
    min-height: 323px; 
} 

table { 
    width: 100%; 
    min-height: 323px; 
} 

table tr { 
    min-height: 54px; 
} 
+2

沒有在您的文章足夠的信息,以提供一個答案。請張貼HTML(並且jsfiddle也會有幫助)。 – fred02138

回答

33

更改表格的最小高度。如果內容較高,表格將無論如何放大

8

min-height屬性的效果沒有爲表格,表格行和表格單元格定義。

參見:http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

假設您的標記看起來像下面的HTML:

<div class="table-wrap"> 
    <table> 
     <tr> 
      <td>Cell 1 Donec ipsum libero...</td> 
     </tr> 
     <tr> 
      <td>Cell 2</td> 
     </tr> 
    </table> 
</div> 

現在,考慮下面的CSS:

.table-wrap { 
    min-height: 323px; 
    border: 1px dotted blue; 
} 
table { 
    width: 400px; 
    height: 323px; 
    border: 1px dashed red; 
} 
table tr { 
    height: 54px; 
} 
table td { 
    border: 1px dotted red; 
} 

在這種情況下,該表將有最小高度爲323px,並且此高度將根據每行表格單元格中內容的詳細信息分配到表格中的各行中。

至少,每排高度至少爲54px。

如果您有很多具有短單元格(高度小於54px)的行,那麼表格高度最終會調整以適應行數。

如果表格只有少數幾行具有短單元格,那麼行將增加高度以填充表格的高度爲323px。

在這種情況下,.table-wrap父元素對錶的高度沒有任何影響。

見小提琴在:http://jsfiddle.net/audetwebdesign/zMtBu/

4

添加height: 0,這將讓火狐採取min-height