फ़ायरफ़ॉक्स खाली टैब के साथ तालिका की सीमा क्यों प्रस्तुत नहीं करता है?

Question

फ़ायरफ़ॉक्स तालिका तालिका सीमाओं को सही ढंग से प्रस्तुत नहीं करता है जब किसी तालिका में खाली टैब होता है।

लेकिन यदि आप छद्म तत्व को छिपाने के लिए छद्म चयनकर्ता tbody:empty {display:none;} का उपयोग करते हैं, तो सब कुछ अपेक्षित के रूप में प्रस्तुत किया जाता है।

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 पर के अंतर्गत आता है।

साइड नोट: हालांकि एक खाली tbody HTML 5 में मान्य है, लेकिन प्रत्येक पंक्ति समूह में कक्षों की संख्या मिलान की जानी चाहिए (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