Làm cách nào để tạo các góc bo tròn trên Đầu Bảng chỉ

Question

Tôi muốn biết cách tạo các góc tròn trên đầu bảng?

Chi tiết bổ sung ... Tôi muốn có một đầu rouded của bảng phần còn lại của bảng là một hình chữ nhật chỉ hàng tiêu đề đầu tiên nên có góc tròn.

Answer 1

Vấn đề là, mà bạn cần phải thực hiện các yếu tố nội tại nhất định quanh.

Vì vậy, bạn phải thực hiện cho vòng đầu tiên và vòng cuối cùng để nhận được giải pháp mong muốn.

table th:first-child{ 
    border-radius:10px 0 0 10px; 
} 

table th:last-child{ 
    border-radius:0 10px 10px 0; 
} 

Answer 2

Sẽ dễ dàng hơn nếu bạn thấy mã của mình hoặc ít nhất mã không hoạt động cho bạn.

Dù sao, hướng dẫn này dường như có liên quan đến câu hỏi của bạn http://www.jeox.com/docs/manual/web/round_table_corners.html

EDIT: Hoặc này một http://blog.jezmckean.com/css3-rounded-table-corners-no-images/

Answer 3

Có một số tùy chọn. Nó phụ thuộc vào những gì bạn thực sự muốn đạt được một cách trực quan.

Nhưng hãy chắc chắn rằng border-collapse KHÔNG được đặt thành thu gọn vì điều đó sẽ không hoạt động. Để biết thêm thông tin, xem link mozilla này: https://developer.mozilla.org/en/CSS/border-radius

#uno, 
 
#due th, 
 
#tre th { 
 
    border-top-right-radius: 10px; 
 
    border-top-left-radius: 10px; 
 
    border: 1px solid black; 
 
} 
 
#tre td { 
 
    border: 1px solid black; 
 
}

<table id="uno" border="0"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>row 1, cell 1</td> 
 
    <td>row 1, cell 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>row 2, cell 1</td> 
 
    <td>row 2, cell 2</td> 
 
    </tr> 
 
</table> 
 

 
<br> 
 

 
<table id="due" border="1"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>row 1, cell 1</td> 
 
    <td>row 1, cell 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>row 2, cell 1</td> 
 
    <td>row 2, cell 2</td> 
 
    </tr> 
 
</table> 
 

 
<br> 
 

 
<table id="tre" border="0"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>row 1, cell 1</td> 
 
    <td>row 1, cell 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>row 2, cell 1</td> 
 
    <td>row 2, cell 2</td> 
 
    </tr> 
 
</table>