Làm cách nào để có đường viền tròn trên bảng và thu gọn biên giới: thu gọn?

Question

tôi có như sau:

<TABLE style="border-radius: 5px; border: 1px solid #999; xborder-collapse: collapse;"> 
    <THEAD> 
    <TR style="background-color: red;"> 
     <TH>Weekday</TH> 
     <TH>Date</TH> 
     <TH>Manager</TH> 
     <TH>Qty</TH> 
    </TR> 
    </THEAD> 
    <TBODY> 
    <TR> 
     <TD>Mon</TD> 
     <TD>09/11</TD> 
     <TD>Kelsey</TD> 
     <TD>639</TD> 
    </TR> 
    <TR> 
     <TD>Tue</TD> 
     <TD>09/12</TD> 
     <TD>Lindsey</TD> 
     <TD>596</TD> 
    </TR> 
    <TR> 
     <TD>Sun</TD> 
     <TD>09/17</TD> 
     <TD>Susan</TD> 
     <TD>272</TD> 
    </TR> 
    </TBODY> 
</TABLE> 

Example

Tôi muốn có biên giới làm tròn, không có khoảng trống giữa các tế bào cũng có diện tích tiêu đề đầu bảng của tôi một màu khác nhau. Nhưng nó dường như không hoạt động.

Tôi đã tạo câu đố này. Khi tôi nhận xét ra sự sụp đổ biên giới tôi nhận được các cạnh tròn nhưng không gian giữa các tế bào. Khi nó ở trong tôi không có bán kính biên giới và không có khoảng cách giữa các ô.

Cập nhật:

Đây có vẻ là giải pháp hoàn hảo: Fiddle

Answer 1

Thêm border-spacing:0 thay vì border-collapse:collapse trên thẻ bảng của bạn sửa chữa nó:

jsFiddle Demo

Answer 2

Dưới đây là một ví dụ sử dụng một wrapper div:

<div style="display: table; 
      padding: 2px; 
      border-radius: 5px; 
      border: 1px solid #999;"> 
    <TABLE style="border-collapse: collapse;"> 
    <THEAD> 
     <TR style="background-color: red;"> 
     <TH>Weekday</TH> 
     <TH>Date</TH> 
     <TH>Manager</TH> 
     <TH>Qty</TH> 
     </TR> 
    </THEAD> 
    <TBODY> 
     <TR> 
     <TD>Mon</TD> 
     <TD>09/11</TD> 
     <TD>Kelsey</TD> 
     <TD>639</TD> 
     </TR> 
     <TR> 
     <TD>Tue</TD> 
     <TD>09/12</TD> 
     <TD>Lindsey</TD> 
     <TD>596</TD> 
     </TR> 
     <TR> 
     <TD>Sun</TD> 
     <TD>09/17</TD> 
     <TD>Susan</TD> 
     <TD>272</TD> 
     </TR> 
    </TBODY> 
    </TABLE> 
</div> 

Bạn có thể nhìn thấy nó làm việc ở đây: jsFiddle

Lưu ý: display:table; không được hỗ trợ trong IE7 trở về trước. IE8 yêu cầu một: !DOCTYPE trong tài liệu. Tất cả các trình duyệt hiện đại (bao gồm IE9) đều hỗ trợ nó, vì vậy nó không phải là một vấn đề.