Bagaimana menambahkan radius perbatasan pada baris tabel

Adakah yang tahu bagaimana gaya tr sesuka kita?

Saya telah menggunakan border-collapse pada tabel, setelah itu tr's dapat menampilkan 1px solid border yang saya berikan kepada mereka.

Namun, ketika saya mencobanya -moz-border-radius, tidak berhasil. Bahkan margin sederhana tidak berfungsi.

Anda hanya dapat menerapkan radius-batas ke td, bukan tr atau tabel. Saya telah mengatasi ini untuk tabel sudut membulat dengan menggunakan gaya ini:

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; }

Pastikan untuk memberikan semua prefiks vendor. Berikut ini contohnya dalam aksinya .

Spasi Aktual Antar Baris

Ini adalah utas lama, tetapi saya perhatikan membaca komentar dari OP pada jawaban lain yang tampaknya memiliki tujuan awal border-radiuspada baris, dan celah di antara baris. Tampaknya solusi saat ini tidak persis seperti itu. jawaban theazureshadow mengarah ke arah yang benar, tetapi tampaknya membutuhkan lebih banyak.

Bagi mereka yang tertarik dengan hal tersebut, berikut adalah biola yang memisahkan baris dan menerapkan radius ke setiap baris. (CATATAN: Firefox saat ini memiliki bug dalam menampilkan / kliping background-colordi jari-jari perbatasan .)

Kode tersebut adalah sebagai berikut (dan seperti yang dicatat theazureshadow, untuk dukungan browser sebelumnya, berbagai prefiks vendor untuk border-radiuskebutuhan ditambahkan).

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; 
}

Info bonus: border-radiustidak berpengaruh pada tabel dengan border-collapse: collapse;dan set batas pada td. Dan tidak masalah jika border-radiusdisetel table, tratautd —diabaikan.

http://jsfiddle.net/Exe3g/

Elemen tr menghormati radius-perbatasan. Bisa menggunakan html dan css murni, tanpa javascript.

Tautan 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>

Saya pikir meruntuhkan perbatasan Anda adalah hal yang salah untuk dilakukan dalam kasus ini. Menciutkannya pada dasarnya berarti bahwa batas antara dua sel yang bertetangga menjadi bersama. Ini berarti tidak jelas ke arah mana kurva harus diberi radius.

Sebagai gantinya, Anda dapat memberikan radius batas ke dua sudut kiri dari TD pertama dan dua sudut kanan dari TD terakhir. Anda dapat menggunakan first-childdan last-childpenyeleksi seperti yang disarankan oleh theazureshadow, tetapi ini mungkin kurang didukung oleh versi IE yang lebih lama. Mungkin lebih mudah untuk hanya mendefinisikan kelas, seperti .first-columndan .last-columnuntuk melayani tujuan ini.

Menurut Opera , standar CSS3 tidak mendefinisikan penggunaan border-radiuson TDs. Pengalaman saya adalah bahwa Firefox dan Chrome mendukungnya tetapi Opera tidak (tidak tahu tentang IE). Solusinya adalah dengan membungkus konten td dalam sebuah div dan kemudian menerapkannya border-radiuske div.

Tidak mencoba mengambil kredit apa pun di sini, semua kredit diberikan ke @theazureshadow untuk balasannya, tetapi saya pribadi harus menyesuaikannya untuk tabel yang memiliki beberapa <th>alih-alih <td>untuk sel baris pertama itu.

Saya baru saja memposting versi modifikasi di sini jika beberapa dari Anda ingin menggunakan solusi @ theazureshadow, tetapi seperti saya, miliki beberapa <th>terlebih dahulu <tr>. Kelas "reportTable" hanya harus diterapkan ke tabel itu sendiri .:

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;
}

Jangan ragu untuk menyesuaikan bantalan, radius, dll agar sesuai dengan kebutuhan Anda. Semoga bisa membantu orang!

Saya menemukan bahwa menambahkan radius batas ke tabel, trs, dan tds tampaknya tidak berfungsi 100% di versi terbaru Chrome, FF, dan IE. Yang saya lakukan adalah, saya membungkus tabel dengan div dan meletakkan border-radius di atasnya.

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

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

Jika meja Anda tidak tersedia width: 100%, Anda dapat membuat pembungkusnya float: left, ingatlah untuk membersihkannya.

Gunakan border-collapse: pisate; dan spasi batas: 0; tetapi hanya gunakan border-right dan border-bottom untuk tds, dengan border-top diterapkan ke th dan border-left diterapkan hanya untuk tr td: nth-child (1).

Anda kemudian dapat menerapkan radius batas ke pojok tds (menggunakan anak-n untuk menemukannya)

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;
}

Atau gunakan box-shadow jika tabel telah diciutkan

Semua jawaban terlalu panjang. Cara termudah untuk menambahkan radius batas ke elemen tabel yang menerima batas sebagai properti, adalah melakukan radius batas dengan overflow: hidden.

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