在Firefox中的表的最小高度不起作用

Question

基本上,我希望我的桌子有一个最小高度,因此它可以根据它自己的方式进行调整.这在chrome中效果很好,但它真的不喜欢FireFox,试过显示:块; 但这会让事情变得更糟糕.

谢谢.

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

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

table tr {
    min-height: 54px;
}

Answer 1

将桌子的最小高度更改为高度.如果内容较高,表格无论如何都会被放大

Answer 2

添加height: 0,这将使Firefox成为min-height

Answer 3

的效果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/