html - Min-Height for a table in firefox not working

Question

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.

Thanks.

.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。

如果您有很多行包含短单元格（高度小于 54 像素），那么最终表格高度将调整以适应这些行。

如果表格只有几行带有短单元格，则行的高度将增加以填满表格的 323px 高度。

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

参见小提琴：http: //jsfiddle.net/audetwebdesign/zMtBu/

Answer 4

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

min-height: [whatever]

不会很好玩

display: table

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

结案