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?


318

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.


2
Tidak bisakah Anda membungkus tabel dalam div, atur radius batas dan "overflow: hidden" pada div? Saya baru saja menguji dan itu berfungsi dengan baik, kecuali jika Anda perlu menggulir / memperluas di div yang memiliki lebar / tinggi fix atau orang tuanya yang melakukannya.
Ian

Pernyataan CSS terakhir tidak memiliki titik koma, saya pikir.
JensG

3
Pertanyaan ini diajukan pada tahun 2009. Saya sedikit terkejut bahwa pada tahun 2015 tidak ada solusi yang lebih baik daripada yang tercantum di bawah ini. W3C seharusnya memperbaikinya beberapa tahun yang lalu.
Jonathan M

Jawaban:


242

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.


75
Alih-alih bercanda dengan HTML, mengapa tidak menambahkan border-spacing: 0;sebagai gaya perbatasan?
Ramon Tayag

3
Saya mengalami masalah mengatur warna latar belakang tag TR daripada tag TD. Pastikan jika Anda mengupas meja Anda bahwa Anda sedang mengatur warna latar belakang TD bukan TR.
Will Shaver

Nah apa yang terjadi jika Anda harus menggunakan background-color pada TR? Apakah mungkin?
Mohoch

1
Hanya menambahkan border-spacing: 0;seperti Ramon merekomendasikan memperbaikinya untuk saya. Pastikan Anda menambahkan border-radiusdan border-spacinggaya ke elemen <th>atau <td>, bukan <thead>atau <tbody>.
Gavin

1
Saya menggunakan bootstrap dan saya telah menemukan solusinya dengan menggunakan saran Ramon, seperti ini:border-spacing: 0; border-collapse: separate;
Caner SAYGIN

84

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

5
Ini adalah satu-satunya hal yang berhasil bagi saya. Sulit untuk mendapatkan warna yang tepat pada batas meja.
Thomas Ahle

Tidak dapat digunakan jika meja Anda memiliki warna latar belakang yang berbeda dari area sekitarnya.
g.pickardou

1
Terima kasih atas kodenya, ini juga bekerja dengan Firefox 26.0
maxivis

1
@ g.pickardou masalah itu dapat diatasi dengan menambahkan 'overflow: hidden' ke elemen tabel.
Val

bayangan kotak membuat meja lebih besar dan sisi-sisinya terpotong sekarang.
Ray

63

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>


1
Silakan tulis jawaban yang menyertakan kode (permanen). Jika ada banyak kode untuk jawabannya, cukup kirimkan bit yang relevan dan penjelasan mengapa mereka relevan.
Samuel Harmer

3
Ini adalah solusi yang bagus, tapi agak sulit dibaca. Saya menulis ulang beberapa aturan gaya dan menambahkan penjelasan kode, jadi semoga membantu.
Michael Martin-Smucker

menerapkan radius ke tabel juga, atau yang terlihat aneh ketika Anda menerapkan latar belakang ke tabel itu sendiri.
kambing

Apa yang table.Infoharus dilakukan kelas dengan sesuatu?
Pylinux

28

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


Terima kasih, ini izinkan saya melakukan apa yang perlu saya lakukan (yang melibatkan serangkaian elemen TH di bagian atas kotak 'sudut bulat' yang berisi semua TDs di bawah ini)
RonLugge

12
Masalahnya border-spacing: 0adalah Anda tidak dapat memiliki batas 1px, bukan? Karena batas menumpuk bukannya runtuh.
Michael Martin-Smucker

1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;menghasilkan apa yang saya butuhkan.
Milad.Nozari

23

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.


Itu adalah sesuatu yang saya pertimbangkan juga, tetapi jika saya membuat div untuk mengelilingi meja dan mengaturnya untuk memiliki sudut bulat, sudut meja persegi masih berdarah. Lihat contoh yang baru diposting.
vamin

Kompromi terbaik yang bisa saya temukan adalah menambahkan blok THEAD ke tabel dan menerapkan latar belakang abu-abu ke sana (dengan #eee di atas meja itu sendiri). Sel header meluap di balik perbatasan TABLE, bukan di depannya. Lalu saya menambah batas tabel menjadi 3px untuk menyembunyikan overflow.
user59200

3
@vamin "berdarah melalui" - tidak jika Anda menggunakanoverflow:hidden;
Brian McCutchon

Jadi dalam situasi ini setiap orang dapat menggunakan solusi saya dari bawah halaman ini b2n.ir/table-radius
AmerllicA

15

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.


Ingat, siapa pun yang ingin menggunakannya, bahwa dengan overflow: hiddensembulan / tooltip apa pun akan terpotong oleh dimensi pembungkus.
user776686

7

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 telah menambahkan contoh dengan cellspacing = 0, dan itu jauh lebih dekat. Perbatasan yang tidak diinginkan menghilang, tetapi sudut bawah masih berdarah.
vamin

Sekali lagi terima kasih atas bantuan Anda. Tabel dihasilkan dalam php, jadi saya berpikir jika tidak ada solusi elegan yang diusulkan saya hanya akan menetapkan kelas untuk setiap sudut th / td dan gaya secara terpisah.
vamin

6

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.


5

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

4

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.


Anda tidak perlu awalan untuk radius batas lagi, harapkan untuk FF 3.6 (-moz). Juga, -khtml tentu tidak lagi diperlukan.
Jonatan Littke

@ JonatanLittke, Anda selalu dapat mengedit jawabannya jika Anda pikir itu dapat ditingkatkan. Saya menghapus semua awalan dan menambahkan tautan ke caniuse.com sehingga orang dapat membuat keputusan sendiri tentang awalan border-radius.
Michael Martin-Smucker

4

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>

4

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

Ini berfungsi, tetapi mengharuskan Anda untuk kemudian menggunakan trik anak pertama / terakhir untuk mendapatkan efeknya.
Thomas Ahle

4

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 !*/

3

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

tidak ada alasan untuk membuat wiki komunitas jawaban ini. Melakukan ini membuatnya agar Anda tidak mendapatkan reputasi dari jawaban Anda.
tacaswell

3

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 :)


3

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.


Ini adalah solusi yang cerdas tetapi juga "menghilangkan" perbatasan yang sebenarnya juga. Di Chrome, batas kanan dan batas bawah tabel menghilang dan semua sudut bulat tidak memiliki batas.
Alex Jorgenson

3

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

2

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

2

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

2

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


0

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

Saya kira Anda mungkin belum mengerti, ia mencoba melakukannya dengan border-collapse: collapsediaktifkan.
giovannipds

@giovannipds Lihatlah jawabannya sendiri (jawaban yang diterima). Cara saya hanyalah cara lain. Sekarang hapus "-1".
Diego Mello

Oh, maaf, Anda benar sekali, kesalahan saya, jawaban yang diterima tampaknya mengatakan hal yang persis sama. Saya harus tetap berpegang pada apa yang tertulis dalam judul pertanyaan, dia menekankan dia ingin perbatasan-runtuh jadi saya langsung menuju ke sana. Saya akan menghapus -1 jika saya bisa, tetapi saya tidak bisa, Anda perlu mengedit sesuatu di jawaban agar saya bisa. Cobalah untuk menyebutkan sesuatu tentang ini yang tidak mungkin dilakukan border-collapse: collapse. Maafkan lagi, saya akan menunggu pembaruan Anda.
giovannipds

0

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>


-1

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.