Firefox中表格的最小高度不起作用答案

【问题标题】：Min-Height for a table in firefox not workingFirefox中表格的最小高度不起作用
【发布时间】：2017-09-01 00:09:44
【问题描述】：

基本上，我想为我的桌子设置一个最小高度，以便它可以根据自己的方式进行调整。这在 chrome 中效果很好，但它真的不喜欢 FireFox，尝试了 display:block;但这会使 chrome 上的情况变得更糟。

谢谢。

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

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

table tr {
    min-height: 54px;
}

【问题讨论】：

您的帖子中没有足够的信息来提供答案。请发布 HTML（jsfiddle 也会有所帮助）。

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

添加height: 0，这将使Firefox 采用min-height

【讨论】：

哇。你是对的 - 这行得通。你有什么解释原因吗？

【解决方案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，并且此高度将根据每行表格单元格中内容的详细信息分布在表格的各个行中。

至少，每一行的高度至少为 54 像素。

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

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

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

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

【讨论】：

【解决方案4】：

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

min-height: [whatever]

不会很好玩

display: table

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

结案

【讨论】：

一年后这仍然是一个错误？
仍然是一个错误。 >_