Warum zeigt Firefox den Rand der Tabelle nicht mit leerem tbody an?

Question

Firefox zeigt Tabellenzellenränder nicht korrekt an, wenn eine Tabelle einen leeren tbody enthält.

Wenn Sie jedoch den Pseudo-Selektor tbody:empty {display:none;} verwenden, um das tbody-Element auszublenden, wird alles wie erwartet gerendert.

jsfiddle

table { 
 
    border-collapse: collapse; 
 
} 
 
th, 
 
td { 
 
    border: 1px solid #000; 
 
} 
 

 
.fixed tbody:empty { 
 
    display: none; 
 
}

<table class="broken"> 
 
    <thead> 
 
     <tr> 
 
      <th>1</th> 
 
      <td>2</td> 
 
      <td>3</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
    <tfoot> 
 
     <tr> 
 
      <th>1</th> 
 
      <td>2</td> 
 
      <td>3</td> 
 
     </tr> 
 
    </tfoot> 
 
</table> 
 

 
<hr /> 
 

 
<table class="fixed"> 
 
    <thead> 
 
     <tr> 
 
      <th>1</th> 
 
      <td>2</td> 
 
      <td>3</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
    <tfoot> 
 
     <tr> 
 
      <th>1</th> 
 
      <td>2</td> 
 
      <td>3</td> 
 
     </tr> 
 
    </tfoot> 
 
</table>

Answer 1

Es meisten gehört wahrscheinlich zu Bug 409254 und Bug 217769 auf Firefox.

Seitennotiz: Obwohl ein leerer tbody in HTML 5 gültig ist, sollte die Anzahl der Zellen in jeder Zeilengruppe (außer colspan) in einer Tabelle übereinstimmen.

Eine Problemumgehung wäre das separate Zeichnen der Rahmen sowohl für die Tabellen- als auch für die Zellenelemente.

table { 
    border-collapse: separate; /*changed from collapse*/ 
    border-spacing: 0; 
    border: 1px solid; 
    border-width: 0 0 1px 1px; /*draw bottom and left borders*/ 
} 
th, 
td { 
    border: 1px solid; 
    border-width: 1px 1px 0 0; /*draw top and right borders*/ 
} 

jsfiddle