Min-height For A Table In Firefox Not Working

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

Solution 1:

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

Solution 2:

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

Solution 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:

<divclass="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;
}
tabletr {
    height: 54px;
}
tabletd {
    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/

Solution 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