Tại sao đường viền của <th> và <thead> đều không hiển thị ở đây?

Question

Tại sao cả hai đường viền không hiển thị?

http://jsfiddle.net/r8mA7/

<table> 
<thead style="border-top:10px solid red; background:yellow"> 
    <tr><th style="border-top:10px solid green">Name</th></tr> 
</thead> 
<tbody> 
    <tr><td>Bob</td></tr> 
    <tr><td>Tom</td></tr> 
</tbody> 
</table> 

Answer 1

Đó là hành vi mong đợi. Odd, nhưng mong đợi.
Đường viền bị thu hẹp và đường viền dày hơn chiếm ưu thế.

Bạn có thể xem bằng ví dụ này: các đường viền chạm trên hàng thu gọn đầu tiên, các đường viền trên hàng thứ hai thì không.
Trên hàng đầu tiên ô đầu tiên có đường viền dày hơn (xanh lá cây 10px> 5px màu đỏ) và ô thứ hai có đường viền dày hơn (5px đỏ> 3px màu xanh lục).
Trên hàng thứ hai không có đường viền "liền kề" để thu gọn, vì vậy đường viền màu xanh lá cây 10px và 3px màu xanh lục sẽ hiển thị bình thường.

<table> 
<thead style="border-top:5px solid red; background:yellow"> 
    <tr> 
    <th style="border-top:10px solid green">Name</th> 
    <th style="border-top:3px solid green">Name</th> 
    </tr> 
    <tr> 
    <th style="border-top:10px solid green">Name</th> 
    <th style="border-top:3px solid green">Name</th> 
    </tr> 
</thead> 
</table> 

Cần tôi giải thích bằng cách nào?

PS: về mặt lý thuyết bạn có thể sử dụng thuộc tính border-collapse trên bảng để ngăn chặn điều đó, nhưng tôi không quản lý.
Ngoài ra, giá trị mặc định dường như không bị thu gọn.

Đọc thêm: http://www.w3.org/TR/CSS2/tables.html#borders

Answer 2

Bạn có thể sử dụng các yếu tố <thead> như bộ chọn như thế này:

thead { background: red; } 

You can see an example here

Answer 3

tặng một tên lớp để bàn của bạn. Và phong cách nó như sau

<style> 
.mytable thead{ 
//your style goes here 
} 


</style> 

EDIT:

<table> 
<thead style="border-top:10px solid red; background:yellow"> 
    <tr><th style="border-left:10px solid green">Name</th></tr> 
</thead> 
<tbody> 
    <tr><td>Bob</td></tr> 
    <tr><td>Tom</td></tr> 
</tbody> 
</table> 

Hãy thử mã này. Biên giới của thead và thứ đang được hiển thị. Có thể là thứ có ưu tiên cao hơn khi có cùng một thuộc tính kiểu xung đột giữa th và thead