Firefox hides tables with no content and no set height

Question

I have an empty table or div with display:table:

If I now add a border to the table - even though there is no content - I would expect to see the border.

In Chrome and IE there is a border. In Firefox - the border takes up space, but it is hidden.

DEMO

table,
div {
  width: 200px;
  background: tomato;
  margin-bottom: 20px;
  border: 2px solid black;
}
div + div,
table + table {
  background: green;
  height: 200px;
}
div {
  display: table;
}

<div></div>
<div></div>

<table></table>
<table></table>

Similarly, I can even add a min-height to the table - Chrome and IE both respect the min-height property, but Firefox still hides the table completely.

DEMO

So in order for the table to get height in Firefox - the table needs either content or a set height.

So I'm wondering: Is this a firefox bug, or is there a valid reason/source from the spec that a table with no content or set height is hidden.

Answer 1

A workaround for this bug would be to use CSS generated content on the elements. Even setting an empty string solves the issue, and since it is blank, there should be no negative effects from doing this.

Workaround:

table:after,
div:after {
    content: "";
}

Working Example (JSFiddle):

table, div {
   width: 200px;
   background: tomato;
   margin-bottom: 20px;
   border: 2px solid black;
}
div + div, table + table {
    background: green;
    height: 200px;
}

div {   
    display:table;    
}
table:after,
div:after {
    content: "";
}

<div></div>
<div></div>

<table></table>
<table></table>

Note that in the example above the default border-spacing: 2px; for table elements will still be rendered. You can use border-spacing: 0; to remove the extra spacing.

On the issue of min-height not working, the effects of min-height and max-height is undefined for tables.

Specification:

In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.

There's also not much reason to use it, since specifying a height does not limit the height of a table, and effectively behaved as min-height would.