Perché Firefox non rende il bordo della tabella vuoto?

Question

Firefox non esegue correttamente il rendering dei bordi delle celle della tabella quando una tabella ha un tbody vuoto.

Ma se si utilizza lo pseudo-selettore tbody:empty {display:none;} per nascondere l'elemento tbody, tutto viene reso come previsto.

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

E 'molto probabile che appartiene alla Bug 409254 e Bug 217769 su Firefox.

Nota a margine: sebbene un codice vuoto tbody sia valido in HTML 5, il numero di celle in ogni gruppo di righe deve corrispondere (eccetto l'uso di colspan) in una tabella.

Una soluzione consisterebbe nel disegnare i bordi separatamente su entrambi gli elementi tabella e cella.

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