Đường viền quanh phần tử tr không hiển thị?

Question

Có vẻ như Chrome/Firefox không hiển thị đường viền trên tr, nhưng nó sẽ hiển thị đường viền nếu bộ chọn là table tr td.

Làm cách nào để đặt đường viền trên tr?

thử của tôi, mà không làm việc:

HTML

<table>  
    <tbody> 
     <tr> 
      <td> 
       Text 
      </td> 
     </tr> 
    </tbody> 
</table> 

CSS

table tr 
{ 
    border:1px solid black; 
} 

http://jsfiddle.net/edi9999/VzPN2/

Đây là một simila r câu hỏi: Set border to table tr, works in everything except IE 6 & 7, nhưng nó có vẻ làm việc ở khắp mọi nơi ngoại trừ IE.

Answer 1

Thêm phần này vào stylesheet:

table { 
    border-collapse: collapse; 
} 

JSFiddle.

Lý do tại sao nó cư xử theo cách này là thực sự mô tả khá tốt trong the specification:

Có hai mô hình khác nhau để thiết lập biên giới trên các tế bào bảng trong CSS. Một là thích hợp nhất cho cái gọi là biên giới riêng biệt xung quanh tế bào cá nhân, khác là phù hợp cho biên giới là liên tục từ một đầu của bảng khác.

... và sau đó, cho collapse thiết lập:

Trong mô hình biên giới sụp đổ, người ta có thể xác định biên giới mà vòm toàn bộ hoặc một phần của một tế bào, hàng, nhóm hàng, cột và cột nhóm.

Answer 2

<tr border="1"> 

hoặc

<table border="1"> 

nên làm việc.

Nếu bạn muốn làm điều đó với css, có lẽ nó muốn được tốt hơn làm điều đó với một lớp hoặc

<tr style="border 1px solid black">