Firefox의 테이블 헤더 테두리가 잘못됨

Question

버그입니다. 알고 싶습니다. jsfiddle에서 볼 수 있듯이 모든 셀 주위에는 테두리 대신 위쪽 테두리 만 있습니다. IE 9는 테두리를 예상대로 그립니다. <tbody>에 <tfooter>의 내용을 이동하면 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

작동이 붕괴 테두리를 다루는 다른 방법 브라우저 때문이다.

파이어 폭스에서는 이없는 tbody이 비어 있으면 아무런 경계로 처리되지 않고 테두리가없는 가장자리는 거의 모든 행의 가장자리에 표시됩니다.

귀하의 경우에는 사용하지 않은 tbody만을 제거하거나 적어도 <tr></tr>을 두 개 넣으십시오.