Tại sao Firefox không hiển thị đường viền của bảng bằng tbody rỗng?

Question

Firefox không hiển thị chính xác ô của bảng khi một bảng có một ô trống.

Nhưng nếu bạn sử dụng công cụ chọn giả tbody:empty {display:none;} để ẩn phần tử tbody, mọi thứ được hiển thị như mong đợi.

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

Nó rất có thể thuộc về Bug 409254 và Bug 217769 trên Firefox.

Lưu ý phụ: Mặc dù trống tbody hợp lệ trong HTML 5, nhưng số lượng ô trong mỗi nhóm hàng phải được đối sánh (ngoại trừ sử dụng colspan) trong một bảng.

Giải pháp thay thế sẽ vẽ các đường viền riêng biệt trên cả phần tử bảng và ô.

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