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

Basically, i would like to have a min-height for my table, so that responsively it can adjust at it's own means. This works beautifully in chrome but it really doesn't like FireFox, tried the display:block; but that makes things worse on chrome.

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

Thanks.

谢谢。

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

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

table tr {
    min-height: 54px;
}

4 个解决方案

#1

change table's min-height to height. if the content is higher, table will be enlarged anyway

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

#2

The effect of min-height property is not defined for tables, table rows and table cells.

没有为表，表行和表格单元定义min-height属性的效果。

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

请参阅：http：//www.w3.org/TR/CSS21/visudet.html#min-max-heights

Suppose your markup looks like the following HTML:

假设您的标记看起来像以下HTML：

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

Now, consider the following CSS:

现在，考虑以下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;
}

In this case, the table will have a minimum height of 323px, and this height will be distributed among the various rows in the table depending on the details of the content in each row's table cells.

在这种情况下，表的最小高度为323px，该高度将分布在表中的各行中，具体取决于每行表格单元格中内容的详细信息。

At the very least, each row will be at least 54px in height.

至少，每行的高度至少为54px。

If you have many rows with short cells (less than 54px in height), then eventually the table height will adjust to accommodate the rows.

如果您有许多行具有短单元格（高度小于54px），那么最终将调整表格高度以容纳行。

If the table has only a few rows with short cells, then the rows will increase in height to fill up the table's height of 323px.

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

The .table-wrap parent element does not have any effect on the height of the table in this case.

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

See fiddle at: http://jsfiddle.net/audetwebdesign/zMtBu/

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

#3

Add height: 0 and that will make Firefox take the min-height

添加高度：0，这将使Firefox采用最小高度

#4

Unfortunately specifically with Firefox this is a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=307866

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

min-height: [whatever]

will not play well with

不会很好玩

display: table

The only alternative is to use a fixed height.

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

Case closed

案件结案

#1