Sudut meja bundar hanya untuk CSS

87

Saya telah mencari dan mencari, tetapi belum dapat menemukan solusi untuk kebutuhan saya.

Saya memiliki tabel HTML biasa. Saya ingin sudut bulat untuk itu, tanpa menggunakan gambar atau JS, yaitu hanya CSS murni . Seperti ini:

Sketsa tata letak tabel

Sudut membulat untuk sel sudut, dan 1pxbatas tebal untuk sel.

Sejauh ini saya memiliki ini:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Tapi itu membuat saya tanpa batas untuk sel. Jika saya menambahkan batas, mereka tidak dibulatkan!

Ada solusi?

html css html-table rounded-corners Vishal Shah
sumber
1
Sudahkah Anda mencoba menambahkan batas ke elemen TD menggunakan moz-border-radius? Juga, ketahuilah bahwa ini tidak akan berfungsi di IE, IE masih akan menampilkan tepi lurus.
Fermin
Melihat jawaban dan komentar Anda, tidak jelas apa yang Anda inginkan: Di mana Anda ingin sudut membulat? tabel, sel tabel, hanya sel di sudut meja Anda?
BiAiB
3
Saya rasa itu cukup jelas dari judul pertanyaan, sudut tabel
Vishal Shah
@VishalShah +1 untuk pertanyaan yang sangat berguna. Saya secara membabi buta menggunakan kelas sudut membulat jQuery UI yang dirancang untuk widget UI, tetapi saya menerapkannya ke elemen tabel dan semuanya menjadi persegi. Jadi sekarang saya masih bisa menggunakan tema jQuery UI saya dengan widget berbasis tabel.
DavidHyogo

Jawaban:

90

Tampaknya berfungsi dengan baik di FF dan Chrome (belum menguji yang lain) dengan batas terpisah: http://jsfiddle.net/7veZQ/3/

Sunting: Berikut implementasi sketsa Anda yang relatif bersih: 

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>
Luaskan cuplikan

http://jsfiddle.net/MuZzz/3577/

RoToRa
sumber
Tidak persis seperti yang saya cari. Jika Anda menghapus bantalan tabel & menerapkan radius batas ke sel sudut saja, Anda mendapatkan batas tebal 2 piksel, yang jelek. Agak tidak memiliki batas sama sekali.
Vishal Shah
3
Menutup. Sel sudut juga membutuhkan radius batas. jsfiddle.net/JWb4T/1 Meskipun sekarang Anda melihat sedikit celah antara tepi sel sudut & tepi tabel. Dapat diperbaiki dengan mengurangi radius perbatasan untuk sel sudut. Terima kasih: D
Vishal Shah
Senang Anda bisa menyelesaikannya. Perhatikan itu first-childdan last-childtidak berfungsi di IE6 / 7/8, tetapi kurang menjadi masalah bagi Anda karena juga tidak border-radius. Ini berarti bahwa Anda tidak akan dapat menggunakan CSS3Pie untuk memperbaikinya di IE - ini akan memperbaiki radius-batas, tetapi bukan anak pertama / terakhir.
Spudley
Menambahkan border-collapse: separate;ke template Zurb Ink memecahkannya untuk saya.
Johan Dettmar
1
mungkin ini terlihat bagus 7 tahun yang lalu, tetapi hari ini batas sel tidak terhubung menggunakan solusi ini sehingga terlihat buruk.
rtaft
23

Bagi saya, Solusi Bootstrap Twitter terlihat bagus. Ini tidak termasuk IE <9 (tidak ada sudut bundar di IE 8 dan yang lebih rendah), tapi tidak apa-apa menurut saya, jika Anda mengembangkan calon Web-Apps.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}
<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>
Luaskan cuplikan

Anda dapat memainkannya di sini (di jsFiddle)

Lars Schinkel
sumber
18

Pertama, Anda membutuhkan lebih dari sekedar -moz-border-radiusjika Anda ingin mendukung semua browser. Anda harus menentukan semua varian, termasuk biasa border-radius, sebagai berikut:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Kedua, untuk langsung menjawab pertanyaan Anda, border-radiussebenarnya tidak menampilkan batas; itu hanya mengatur bagaimana sudut terlihat dari perbatasan, jika ada.

Untuk mengaktifkan perbatasan, dan dengan demikian mendapatkan sudut membulat, Anda juga memerlukan borderatribut pada Anda tddan thelemen.

td, th {
   border:solid black 1px;
}

Anda juga akan melihat sudut membulat jika Anda memiliki warna latar belakang (atau grafik), meskipun tentu saja itu akan membutuhkan warna latar belakang yang berbeda dengan elemen sekitarnya agar sudut yang membulat terlihat tanpa pembatas.

Perlu dicatat bahwa beberapa browser lama tidak suka meletakkan border-radiustabel / sel tabel. Mungkin ada baiknya meletakkan <div>di dalam setiap sel dan menatanya sebagai gantinya. Namun ini seharusnya tidak memengaruhi versi saat ini dari semua browser (kecuali IE, yang tidak mendukung sudut membulat sama sekali - lihat di bawah)

Terakhir, bukan berarti IE tidak mendukung border-radiussama sekali (IE9 beta mendukung , tetapi sebagian besar pengguna IE menggunakan IE8 atau kurang). Jika Anda ingin meretas IE untuk mendukung radius-perbatasan, lihat http://css3pie.com/

[EDIT]

Oke, ini mengganggu saya, jadi saya telah melakukan beberapa pengujian.

Ini adalah contoh JSFiddle yang pernah saya mainkan

Sepertinya hal penting yang Anda lewatkan ada border-collapse:separate;di elemen tabel. Ini menghentikan sel dari menghubungkan perbatasan mereka bersama, yang memungkinkan mereka untuk mengambil radius perbatasan.

Semoga membantu.

Spudley
sumber
Untuk meminimalkan kodenya, saya telah meninggalkan hal-hal lintas-browser. Jika saya beri batas ke td dan th, mereka tidak bulat. Saya mendapatkan tepian yang lurus. Dapat memberikan contoh kode css untuk tabel tanpa menerapkan css padanya, yang akan menunjukkan apa yang Anda katakan.
Vishal Shah
@Vishal Shah - Saya telah memperbarui jawaban saya setelah melakukan beberapa tes. Semoga membantu.
Spudley
Contoh Anda menampilkan radius batas untuk SEMUA sel, yang saya inginkan hanya untuk sel sudut. Ini yang saya cari: jsfiddle.net/JWb4T/1
Vishal Shah
@Vishal Shah - Saya memahami masalahnya adalah kurangnya pembulatan di mana saja di atas meja, daripada secara spesifik bagian mana dari tabel yang harus dibulatkan. Senang Anda mendapatkannya diurutkan pada akhirnya (sepertinya border-collapse:separate;tip itu berguna pada akhirnya)
Spudley
1 untuk runtuh batas itu: tip terpisah. Itu sangat membantu saya.
DavidHyogo
14

Jawaban yang dipilih sangat buruk. Saya akan menerapkan ini dengan menargetkan sel tabel sudut dan menerapkan radius perbatasan yang sesuai.

Untuk mendapatkan sudut atas, atur radius batas pada tipe pertama dan terakhir dari elemen th , kemudian selesaikan dengan mengatur radius perbatasan pada tipe td terakhir dan pertama pada tipe terakhir tr untuk mendapatkan sudut bawah.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
Luke Flournoy
sumber
Ini jauh lebih baik daripada semua jawaban lainnya ... Ini luar biasa sederhana dan elegan!
Eric Cote
Senang aku dapat membantu!
Luke Flournoy
Ini bekerja dengan sangat baik, tetapi saya memiliki tabel lain dengan thelemen di sisi atas dan kiri tabel dan ini tidak berfungsi untuk itu. Bagaimana cara membulatkan sudut dari jenis tabel itu?
nenur
7

Solusi terbaik yang saya temukan untuk sudut membulat dan perilaku CSS3 lainnya untuk IE <9 dapat ditemukan di sini: http://css3pie.com/

Unduh plugin, salin ke direktori dalam struktur solusi Anda. Kemudian di stylesheet Anda pastikan untuk memiliki tag perilaku sehingga menarik plugin.

Contoh sederhana dari proyek saya yang memberi saya sudut membulat, gradien warna, dan bayangan kotak untuk tabel saya:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Jangan khawatir jika Intellisense CSS Visual Studio Anda memberi Anda garis bawah hijau untuk properti yang tidak diketahui, ini masih berfungsi saat Anda menjalankannya. Beberapa elemen tidak terdokumentasi dengan jelas, tetapi contohnya cukup bagus, terutama di halaman depan.

Patrick Rodriguez
sumber
6

Melalui pengalaman pribadi saya telah menemukan bahwa tidak mungkin untuk membulatkan sudut dari sel tabel HTML dengan CSS murni. Membulatkan batas terluar meja dimungkinkan.

Anda harus menggunakan gambar seperti yang dijelaskan dalam tutorial ini , atau yang serupa :)

Kyle
sumber
1
+1, dan sama di sini, baru-baru ini mencoba mencapai ini, tetapi tidak berhasil. Harus dimasukkan ke dalam a <div>. ^^,
tomsseisums
6

Ini sedikit kasar, tapi berikut adalah sesuatu yang saya kumpulkan yang seluruhnya terdiri dari CSS dan HTML.

  • Sudut luar membulat
  • Baris tajuk
  • Beberapa baris data

Contoh ini juga menggunakan :hoverkelas pseudo untuk setiap sel data <td>. Elemen dapat dengan mudah diperbarui untuk memenuhi kebutuhan Anda, dan gerakan kursor dapat dengan cepat dinonaktifkan.

(Namun, saya belum :hoverdapat bekerja dengan benar untuk baris penuh <tr>. Baris terakhir yang di-hover tidak ditampilkan dengan sudut membulat di bagian bawah. Saya yakin ada sesuatu yang sederhana yang terlewatkan.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}
<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>
Luaskan cuplikan

K. Parker
sumber
Ini harus menjadi jawaban yang disetujui. Terima kasih!
inkarnasi
1

Tambahkan <div>pembungkus di sekitar tabel, dan terapkan CSS berikut

border-radius: x px;
overflow: hidden;
display: inline-block;

ke pembungkus ini.

Ubby
sumber
1

Untuk mengadaptasi jawaban brilian @luke flournoy - dan jika Anda tidak menggunakannya thdi tabel Anda, inilah semua CSS yang Anda butuhkan untuk membuat tabel bundar:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
freeworlder
sumber
0

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

Jika Anda menggunakan thead, tfootatau th, cukup ganti 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>
brauliobo.dll
sumber
0

Anda dapat mencoba ini jika Anda ingin sudut membulat di setiap sisi tabel tanpa menyentuh sel: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>
Younes Hadry
sumber
0

Contoh HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, mudah dikonversi ke CSS, gunakan sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Leandro Barbosa
sumber
0

Berikut ini adalah sesuatu yang saya gunakan yang berfungsi untuk saya di seluruh browser, jadi saya harap ini membantu seseorang di masa mendatang:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Tentunya #contentblockbagian tersebut dapat diganti / diedit sesuai kebutuhan dan Anda dapat menemukan border-radius.htcfile tersebut dengan melakukan pencarian di Google atau browser web favorit Anda.

Ansipants
sumber
0

Ini adalah css3 , hanya browser non-IE <9 terbaru yang akan mendukungnya.

Lihat di sini , ini memperoleh properti bulat untuk semua browser yang tersedia

BiAiB
sumber
4
css3please tidak melakukan apapun untuk border-radius di IE. Jika Anda ingin meretas IE untuk mendukung radius-perbatasan, lihat css3pie.com
Spudley
Saya berbicara tentang properti bulat untuk tabel secara khusus, bukan elemen lainnya.
Vishal Shah
0

Tambahkan di antara <head>tag:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

dan di dalam tubuh:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

Warna sel, isi dan format tentu saja sebagai contoh;
ini tentang memberi jarak pada sel yang berisi warna dalam div. Melakukannya, batas sel hitam / batas tabel sebenarnya adalah warna latar belakang div.
Perhatikan bahwa Anda harus menyetel div-border-radius sekitar 2 nilai lebih besar dari radius batas sudut sel yang terpisah, untuk mendapatkan efek sudut bulat yang mulus.

Paul Schuddebeurs
sumber
0

Pelajaran di Batas Tabel ...

CATATAN: Kode HTML / CSS di bawah ini harus dilihat di IE saja. Kode tidak akan ditampilkan dengan benar di Chrome!

Kita perlu mengingat bahwa:

  1. Tabel memiliki batas: batas luarnya (yang juga dapat memiliki radius batas.)

  2. Sel itu sendiri JUGA memiliki batas (yang juga dapat memiliki radius batas.)

  3. Batas tabel dan sel dapat saling mengganggu:

    Batas sel dapat menembus batas tabel (yaitu: batas tabel).

    Untuk melihat efek ini, ubah aturan gaya CSS pada kode di bawah ini sebagai berikut:
    i. tabel {border-collapse: pisahkan;}
    ii. Hapus aturan gaya yang mengelilingi sel sudut tabel.
    aku aku aku. Kemudian mainkan dengan border-spacing sehingga Anda dapat melihat interferensi tersebut.

  4. Namun, batas tabel dan batas sel bisa diciutkan (menggunakan: border-collapse: collapse;).

  5. Saat diciutkan, batas sel dan tabel mengganggu dengan cara yang berbeda:

    saya. Jika batas tabel dibulatkan tetapi batas sel tetap persegi, maka bentuk sel diutamakan dan tabel kehilangan sudut lengkungnya.

    ii. Sebaliknya, jika sel sudut melengkung tetapi batas tabelnya persegi, maka Anda akan melihat sudut persegi jelek yang membatasi kelengkungan sel sudut.

  6. Mengingat atribut sel diutamakan, cara untuk membulatkan empat sudut tabel, adalah dengan:

    saya. Menciutkan batas pada tabel (menggunakan: border-collapse: collapse;).

    ii. Mengatur kelengkungan yang Anda inginkan pada sel sudut tabel.
    aku aku aku. Tidak masalah jika sudut tabel dibulatkan (yaitu: radius batasnya bisa nol). 

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}
			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>
Luaskan cuplikan

IqbalHamid
sumber
-1

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}
Goran Vasic
sumber
Tolong
uraikan
@SrivatsShankar Saya menulis ini lama sekali, jadi dilihat dari -1 ini, saya kira itu tidak berfungsi lagi. Maksud saya adalah menambahkan "radius-batas" ke <table>, dan kemudian "overflow: hidden" akan menyembunyikan batas luar dari <td>. Saya menduga Anda bisa mencoba menambahkan "border-radius", "border" dan "overflow: hidden" ke <div> yang merupakan pembungkus untuk <table>, lalu menambahkan batas di dalam setiap <td> (saya akan membuat elemen pertama dan terakhir dari setiap baris / kolom tanpa batas luar, karena <div> akan memiliki batas membulat, seperti pada gambar)
Goran Vasic
cukup adil. Itu masuk akal. Itu tidak memberikan hasil persis yang diminta, tapi saya mengerti maksud Anda. Jika Anda dapat mengedit jawaban Anda, saya dapat mengubah skor saya. :-)
Srivats Shankar