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

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

Answer 2

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

Answer 3

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

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

Suppose your markup looks like the following 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:

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

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

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

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.

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

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

Answer 4

Unfortunately specifically with Firefox this is a bug: 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