为什么Firefox不会使用空tbody渲染表的边界？

Question

当表有空tbody时，Firefox不会正确呈现表格单元格边框。

但是，如果您使用伪选择器tbody:empty {display:none;}来隐藏tbody元素，则按预期呈现所有内容。

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

它最有可能属于Bug 409254和Bug 217769在Firefox。注意：虽然在HTML 5中有一个空的tbody有效，但每个行组中的单元格数量应该匹配（除了使用colspan）在一个表中。

解决方法是在表格和单元格元素上分别绘制边框。

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