Cách thêm bán kính đường viền trên hàng của bảng

Có ai biết làm thế nào để tạo kiểu tr như chúng tôi muốn?

Tôi đã sử dụng tính năng thu gọn đường viền trên bảng, sau đó tr có thể hiển thị đường viền đặc 1px mà tôi cung cấp cho chúng.

Tuy nhiên, khi tôi đã thử -moz-border-radius, nó không hoạt động. Ngay cả ký quỹ đơn giản cũng không hoạt động.

Bạn chỉ có thể áp dụng bán kính đường viền cho td, không phải tr hoặc bảng. Tôi đã giải quyết vấn đề này cho các bảng góc tròn bằng cách sử dụng các kiểu sau:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

Đảm bảo cung cấp tất cả các tiền tố của nhà cung cấp. Đây là một ví dụ về nó trong hoạt động .

Khoảng cách thực tế giữa các hàng

Đây là một chủ đề cũ, nhưng tôi nhận thấy khi đọc các bình luận từ OP về các câu trả lời khác mà mục tiêu ban đầu dường như là có border-radiustrên các hàng và khoảng cách giữa các hàng. Có vẻ như các giải pháp hiện tại không làm được điều đó một cách chính xác. câu trả lời của theazureshadow đang đi đúng hướng, nhưng dường như cần nhiều hơn một chút.

Đối với những người quan tâm đến điều đó, đây là một công cụ làm việc tách các hàng và áp dụng bán kính cho mỗi hàng. (LƯU Ý: Firefox hiện có một lỗi trong việc hiển thị / cắt background-colorở bán kính đường viền .)

Mã này như sau (và như theazureshadow đã lưu ý, để hỗ trợ trình duyệt sớm hơn, các tiền tố nhà cung cấp khác nhau border-radiuscần được thêm vào).

table { 
    border-collapse: separate; 
    border-spacing: 0 10px; 
    margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

Thông tin tiền thưởng: border-radiuskhông ảnh hưởng đến các bảng có border-collapse: collapse;và đường viền được đặt trên td. Và nó không quan trọng nếu border-radiusđược thiết lập trên table, trhoặc td-Đó là bỏ qua.

http://jsfiddle.net/Exe3g/

Phần tử tr tôn vinh bán kính đường viền. Có thể sử dụng html và css thuần túy, không có javascript.

Liên kết JSFiddle: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
    border: 0;
    display: block;
    margin: 5px;
}
.solid {
    border: 2px red solid;
    border-radius: 10px;
}
.dotted {
    border: 2px green dotted;
    border-radius: 10px;
}
.dashed {
    border: 2px blue dashed;
    border-radius: 10px;
}

td {
    padding: 5px;
}

<table>
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
    </tr>
    <tr class='dotted'>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr class='solid'>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr>
    <tr class='dotted'>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr class='dashed'>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
</table>

Tôi nghĩ rằng việc thu gọn biên giới của bạn là điều sai lầm nên làm trong trường hợp này. Thu gọn chúng về cơ bản có nghĩa là biên giới giữa hai ô lân cận được chia sẻ. Điều này có nghĩa là không rõ hướng mà nó sẽ cong theo bán kính.

Thay vào đó, bạn có thể cung cấp bán kính đường viền cho hai góc bên trái của TD đầu tiên và hai góc bên phải của TD cuối cùng. Bạn có thể sử dụng first-childvà các last-childbộ chọn theo gợi ý của theazureshadow, nhưng chúng có thể không được hỗ trợ bởi các phiên bản IE cũ hơn. Có thể dễ dàng hơn nếu chỉ định nghĩa các lớp, chẳng hạn như .first-columnvà .last-columnđể phục vụ mục đích này.

Theo Opera , tiêu chuẩn CSS3 không xác định việc sử dụng border-radiusTDs. Kinh nghiệm của tôi là Firefox và Chrome hỗ trợ nó nhưng Opera thì không (không biết về IE). Cách giải quyết là bọc nội dung td trong một div và sau đó áp dụng border-radiuscho div.

Không cố gắng lấy bất kỳ tín dụng nào ở đây, tất cả tín dụng sẽ được chuyển đến @theazureshadow cho câu trả lời của anh ấy, nhưng cá nhân tôi đã phải điều chỉnh nó cho một bảng có một số <th>thay vì <td>cho các ô của hàng đầu tiên.

Tôi chỉ đăng phiên bản sửa đổi ở đây trong trường hợp một số bạn muốn sử dụng giải pháp của @ theazureshadow, nhưng giống như tôi, có một số <th>trong lần đầu tiên <tr>. Lớp "reportTable" chỉ phải được áp dụng cho chính bảng:

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

table.reportTable tr:last-child td:first-child{
    border-bottom-left-radius: 10px;
}   

table.reportTable tr:last-child td:last-child{
    border-bottom-right-radius: 10px;
}

Hãy thoải mái điều chỉnh các miếng đệm, bộ tản nhiệt, v.v. để phù hợp với nhu cầu của bạn. Mong rằng sẽ giúp ích cho mọi người!

Tôi nhận thấy rằng việc thêm bán kính đường viền vào bảng, trs và tds dường như không hoạt động 100% trong các phiên bản Chrome, FF và IE mới nhất. Thay vào đó, những gì tôi làm là, tôi bọc bảng bằng một div và đặt bán kính đường viền lên đó.

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

Nếu bảng của bạn không có width: 100%, bạn có thể tạo trình bao bọc của mình float: left, chỉ cần nhớ xóa nó.

Sử dụng biên giới-thu gọn: tách biệt; và khoảng cách đường viền: 0; nhưng chỉ sử dụng border-right và border-bottom cho tds, với border-top được áp dụng cho th và border-left chỉ áp dụng cho tr td: nth-child (1).

Sau đó, bạn có thể áp dụng bán kính đường viền cho các tds góc (sử dụng nth-child để tìm chúng)

https://jsfiddle.net/j4wm1f29/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}

Hoặc sử dụng box-shadow nếu bảng bị sập

Tất cả các câu trả lời là quá dài. Cách dễ nhất để thêm bán kính đường viền vào một phần tử bảng chấp nhận đường viền làm thuộc tính, là thực hiện bán kính đường viền với tràn: ẩn.

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;