Properti radius-perbatasan CSS3 dan border-collapse: collapse tidak bercampur. Bagaimana saya bisa menggunakan jari-jari perbatasan untuk membuat tabel yang diciutkan dengan sudut bulat?

Edit - Asli Judul: Apakah ada cara alternatif untuk mencapai border-collapse:collapsedi CSS(dalam rangka untuk memiliki runtuh, meja sudut bulat)?

Karena ternyata hanya membuat batas tabel runtuh tidak menyelesaikan masalah root, saya telah memperbarui judul untuk lebih mencerminkan diskusi.

Saya mencoba membuat meja dengan sudut bulat menggunakan CSS3 border-radiusproperti. Gaya tabel yang saya gunakan terlihat seperti ini:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Inilah masalahnya. Saya juga ingin mengatur border-collapse:collapseproperti, dan ketika itu diatur border-radiustidak lagi berfungsi. Apakah ada cara berbasis CSS saya bisa mendapatkan efek yang sama seperti border-collapse:collapsetanpa benar-benar menggunakannya?

Suntingan:

Saya telah membuat halaman sederhana untuk menunjukkan masalah di sini (hanya Firefox / Safari).

Tampaknya sebagian besar masalah adalah bahwa pengaturan meja untuk memiliki sudut bulat tidak mempengaruhi sudut tdelemen sudut . Jika semua meja satu warna, ini tidak akan menjadi masalah karena saya hanya bisa membuat sudut atas dan bawah tddibulatkan untuk baris pertama dan terakhir masing-masing. Namun, saya menggunakan warna latar belakang yang berbeda untuk meja untuk membedakan judul dan striping, sehingga tdelemen dalam akan menunjukkan sudut bulat mereka juga.

Ringkasan solusi yang diusulkan:

Mengitari meja dengan elemen lain dengan sudut bundar tidak berfungsi karena sudut persegi tabel "berdarah."

Menentukan lebar perbatasan ke 0 tidak menciutkan tabel.

tdSudut bawah masih persegi setelah pengaturan ruang sel ke nol.

Sebaliknya, menggunakan JavaScript berfungsi dengan menghindari masalah.

Solusi yang memungkinkan:

Tabel dihasilkan dalam PHP, jadi saya hanya bisa menerapkan kelas yang berbeda untuk masing-masing th / tds luar dan gaya setiap sudut secara terpisah. Saya lebih suka tidak melakukan ini, karena itu tidak terlalu elegan dan sedikit sakit untuk diterapkan ke beberapa tabel, jadi tolong terus saran datang.

Kemungkinan solusi 2 adalah menggunakan JavaScript (jQuery, khususnya) untuk menata sudut-sudutnya. Solusi ini juga berfungsi, tetapi masih belum cukup yang saya cari (saya tahu saya pilih-pilih). Saya punya dua pemesanan:

1. ini adalah situs yang sangat ringan, dan saya ingin menjaga JavaScript seminimal mungkin
2. bagian dari daya tarik yang menggunakan radius perbatasan bagi saya adalah degradasi yang anggun dan peningkatan progresif. Dengan menggunakan batas-jari-jari untuk semua sudut bundar, saya berharap memiliki situs yang dibulatkan secara konsisten di browser yang mendukung CSS3 dan situs yang secara konsisten berbentuk persegi di tempat lain (Saya sedang melihat Anda, IE).

Saya tahu bahwa mencoba melakukan ini dengan CSS3 hari ini mungkin tampak tidak perlu, tetapi saya punya alasan. Saya juga ingin menunjukkan bahwa masalah ini adalah hasil dari spesifikasi w3c, bukan dukungan CSS3 yang buruk, sehingga solusi apa pun akan tetap relevan dan berguna ketika CSS3 memiliki dukungan yang lebih luas.

Saya menemukan jawabannya. Anda hanya perlu menggunakan beberapa penyeleksi khusus.

Masalah dengan membulatkan sudut-sudut meja adalah bahwa elemen td juga tidak menjadi bulat. Anda dapat menyelesaikannya dengan melakukan sesuatu seperti ini:

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

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

Sekarang semuanya berputar dengan baik, kecuali bahwa masih ada masalah untuk border-collapse: collapsemenghancurkan segalanya.

Solusinya adalah menambahkanborder-spacing: 0 dan membiarkan default border-collapse: separatedi atas meja.

Metode berikut berfungsi (diuji di Chrome) dengan menggunakan box-shadowdengan sebaran 1pxalih-alih perbatasan "nyata".

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

Jika Anda menginginkan solusi khusus CSS (tidak perlu diatur cellspacing=0dalam HTML) yang memungkinkan untuk perbatasan 1px (yang tidak dapat Anda lakukan dengan border-spacing: 0solusi), saya lebih suka melakukan hal berikut:

• Setel border-rightdan border-bottomuntuk sel tabel Anda ( tddan th)
• Berikan sel di baris pertama aborder-top
• Berikan sel-sel pada kolom pertama aborder-left
• Menggunakan first-childdan last-childpenyeleksi, bulatkan sudut yang sesuai untuk sel tabel di empat sudut.

Lihat demo di sini.

Diberikan HTML berikut:

Lihat contoh di bawah ini:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

Sudahkah Anda mencoba menggunakan table{border-spacing: 0}bukan table{border-collapse: collapse}???

Anda mungkin harus meletakkan elemen lain di sekitar meja dan gaya itu dengan perbatasan bulat.

The Draft bekerja menetapkan bahwa border-radiustidak berlaku untuk elemen tabel ketika nilai border-collapseadalah collapse.

Seperti yang dikatakan Ian, solusinya adalah menyarangkan meja di dalam div dan mengaturnya seperti itu:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

Dengan overflow:hidden, sudut persegi tidak akan berdarah melalui div.

Sejauh yang saya ketahui, satu-satunya cara Anda dapat melakukannya adalah dengan memodifikasi semua sel seperti:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

Dan kemudian untuk mendapatkan perbatasan di bagian bawah dan kanan kembali

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child tidak valid dalam ie6, tetapi jika Anda menggunakan border-radius saya menganggap Anda tidak peduli.

EDIT:

Setelah melihat halaman contoh Anda, tampaknya Anda mungkin dapat mengatasinya dengan spasi dan bantalan sel.

Batas abu-abu tebal yang Anda lihat sebenarnya adalah latar belakang tabel (Anda dapat melihat ini dengan jelas jika Anda mengubah warna batas menjadi merah). Jika Anda mengatur ruang sel ke nol (atau yang setara:td, th { margin:0; } :), "batas" abu-abu akan hilang.

EDIT 2:

Saya tidak dapat menemukan cara untuk melakukan ini hanya dengan satu tabel. Jika Anda mengubah baris tajuk ke tabel bersarang, Anda mungkin bisa mendapatkan efek yang Anda inginkan, tetapi itu akan lebih banyak bekerja, dan tidak dinamis.

Saya mencoba solusi menggunakan elemen pseudo :beforedan :afterpada thead th:first-childdanthead th:last-child

Dikombinasikan dengan membungkus meja dengan a <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

lihat jsFiddle

Bekerja untuk saya di chrome (13.0.782.215) Beri tahu saya jika ini berfungsi untuk Anda di peramban lain.

Sebenarnya Anda bisa menambahkan tablebagian dalam Anda divsebagai pembungkusnya. dan kemudian menetapkan CSSkode - kode ini ke pembungkus:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

Jawaban yang diberikan hanya berfungsi ketika tidak ada batas di sekitar meja, yang sangat terbatas!

Saya memiliki makro di SASS untuk melakukan ini, yang sepenuhnya mendukung perbatasan eksternal dan internal, mencapai gaya yang sama dengan border-collapse: runtuh tanpa benar-benar menentukannya.

Diuji dalam FF / IE8 / Safari / Chrome.

Memberikan batas bundar yang bagus di CSS murni di semua browser tetapi IE8 (menurun dengan anggun) karena IE8 tidak mendukung batas-radius :(

Beberapa browser yang lebih lama mungkin memerlukan awalan vendor untuk bekerja dengannya border-radius, jadi silakan menambahkan awalan itu ke kode Anda sebagaimana diperlukan.

Jawaban ini bukan yang terpendek - tetapi berhasil.

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

Untuk menerapkan gaya ini cukup ubah

<table>

tandai sebagai berikut:

<table class="roundedTable">

dan pastikan untuk memasukkan gaya CSS di atas dalam HTML Anda.

Semoga ini membantu.

Untuk tabel berbatasan dan dapat digulir, gunakan ini (ganti variabel, $ teks awal)

Jika Anda menggunakan thead, tfootatau th, ganti saja tr:first-childdan tr-last-childdan tddengan mereka.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Saya memiliki masalah yang sama. hapus border-collapseseluruhnya dan gunakan: cellspacing="0" cellpadding="0" dalam dokumen html. contoh:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Saya baru saja menulis satu set CSS gila untuk ini yang tampaknya bekerja dengan sempurna:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

Solusi dengan border-collapse: pisahkan untuk tabel dan tampilan: inline-table untuk tbody dan thead.

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

Saya baru dengan HTML dan CSS dan saya juga mencari solusi untuk ini, di sini apa yang saya temukan.

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

Saya coba, coba tebak :)

Menemukan jawaban ini setelah mengalami masalah yang sama, tetapi ternyata cukup sederhana: cukup beri tabel overflow: tersembunyi

Tidak perlu elemen pembungkus. Memang, saya tidak tahu apakah ini akan berhasil 7 tahun yang lalu ketika pertanyaan awalnya diajukan, tetapi berhasil sekarang.

Meja dengan sudut bulat dan dengan sel berbatasan. Menggunakan solusi @Ramon Tayag .

Kuncinya adalah menggunakan border-spacing: 0saat ia menunjukkan.

Solusi menggunakan SCSS .

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

Saya mulai bereksperimen dengan "tampilan" dan saya menemukan bahwa: border-radius , border, margin, padding, dalam tableditampilkan dengan:

display: inline-table;

Sebagai contoh

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Tetapi kita perlu mengatur a widthdari setiap kolom

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

Berikut adalah contoh terbaru tentang cara menerapkan tabel dengan sudut bulat dari http://medialoot.com/preview/css-ui-kit/demo.html . Ini didasarkan pada penyeleksi khusus yang disarankan oleh Joel Potter di atas. Seperti yang Anda lihat, itu juga mencakup beberapa sihir untuk membuat IE sedikit bahagia. Ini mencakup beberapa gaya tambahan untuk mengganti warna baris:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

Ini caranya:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}

<div>
  <table></table>
</div>

Atau

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

Saya selalu melakukan ini dengan menggunakan Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

Solusi terbaik sejauh ini berasal dari solusi Anda sendiri dan seperti ini:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Border-radius sekarang didukung secara resmi. Jadi, dalam semua contoh di atas, Anda dapat meletakkan awalan "-moz-".

Trik lain adalah dengan menggunakan warna yang sama untuk baris atas dan bawah seperti perbatasan Anda. Dengan ketiga warna yang sama, ia menyatu dan tampak seperti meja bundar sempurna meskipun sebenarnya tidak secara fisik.