Question

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

感谢。

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

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

table tr {
    min-height: 54px;
}

Answer 1

将桌子的最小高度更改为高度。如果内容较高，表格将会被放大

Answer 2

没有为表，表行和表格单元定义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。

如果你有很多行有短单元格（高度小于54像素），那么最终会调整表格高度来容纳行。

如果表中只有几行短单元格，那么行的高度会增加，以填满表格的高度323px。

在这种情况下，.table-wrap父元素对表的高度没有任何影响。

请参阅：http://jsfiddle.net/audetwebdesign/zMtBu/

Answer 3

添加height: 0，这将使Firefox获得min-height

Answer 4

不幸的是，特别是Firefox，这是一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=307866

min-height: [whatever]

不能很好地发挥

display: table

唯一的选择是使用固定的高度。

结案

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

4 个答案: