Неправильная граница заголовка таблицы в Firefox

Question

Я хотел бы знать, если это ошибка. Как вы можете видеть на jsfiddle, есть только верхняя граница, а не границы вокруг всех ячеек. Обратите внимание, что IE 9 рисует границы, как ожидалось. Также обратите внимание, что если вы перемещаете содержимое <tfooter> в <tbody>, Firefox начинает рисовать границы как IE.

HTML

<table> 
<thead> 
    <tr> 
     <th>Header 1</th> 
     <th>Header 2</th> 
     <th>Header 3</th> 
    </tr> 
</thead> 
<tfoot> 
    <tr> 
     <td colspan="3"> 
      <span class="norecords">No records found.</span> 
     </td> 
    </tr> 
</tfoot> 
<tbody></tbody> 

CSS

table { 
    background-color: #EFEFEF; 
    border: 1px solid #BCBCBC; 
    border-collapse: collapse; 
} 
th, td { 
    padding: 10px; 
} 
th { 
    border: 1px solid #BCBCBC; 
} 

Answer 1

Ваша проблема является tbody - если вы удалите этот пустой тег (или добавить строку к нему) он будет работы:

http://jsfiddle.net/FyARs/3/

Answer 2

Это работает для всех

<table border=0 cellspacing=0 cellpadding=0> 
    <thead> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
      <th>Header 3</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <td colspan="3"> 
       <span class="norecords">No records found.</span> 
      </td> 
     </tr> 
    </tfoot> 
    <tbody></tbody> 
</table> 

CSS

table { 
    background-color: #EFEFEF; 
    border: 1px solid #BCBCBC; 
} 
th, td { 
    padding: 10px; 
} 
th { 
    border: 1px solid #BCBCBC; 
} 

Answer 3

Это потому, что различные способы браузеров, связанных с обрушением границ.

В firefox пустой tbody без tr в нем, он будет рассматриваться как безграничный, безграничный край будет по краю почти строк.

просто удалите неиспользованный tbody в вашем случае, или поместите хотя бы пару <tr></tr>.