CSS display: table min-height not working

Does anyone know I can make min-height work with the latest browsers? I am using CSS tables and it seems to ignore min-height.

<div style="background-color: red; display: table; min-height: 100px;">
abc
</div>

Fiddle

Solution 1:

When using tables, height essentially is min-height, as tables always stretch. Just get rid of the "min-" and it will work as you expect.

Solution 2:

Use height: 1px; on the table or any value. Basically you need to give table some height to make it work with min-height. Having only min-height won't work on tables on firefox.

Solution 3:

Solution for Firefox

Add height to unlock setting the min-height

div {
    display: table;
    width: 100%;
    height: 0;
    min-height: 100px;
}

The number in height can be any other real value less or equal to min-height for making it work as expected.

Solution 4:

Whenever you are using display:table; or any deeper property like display:table-cell; consider using height instead of min-height. As in tables height = min-height considering the auto-span feature in them.