Cara membulatkan sudut pada tabel di Word. Bagan persentase dalam instruksi pembuatan Excel. Diagram lingkaran sebagai persentase di Excel
Saya mencari dan mencari tetapi tidak dapat menemukan solusi untuk kebutuhan saya.
Saya memiliki tabel HTML sederhana. Saya ingin menggunakan sudut bulat untuk ini tanpa, menggunakan gambar atau JS, mis. Hanya CSS>. Seperti ini:
Sudut membulat untuk sel sudut dan batas tebal 1 piksel untuk sel.
Sejauh ini saya punya ini:
Tabel ( -moz-border-radius: 5px !important; border-collapse: collaps !important; border: none !important; ) tabel th, tabel td ( border: none !important ) tabel th:anak pertama ( -moz- radius-batas: 5px 0 0 0 !penting; ) tabel th:anak-terakhir ( -moz-radius-perbatasan: 0 5px 0 0 !penting; ) tabel tr:anak-terakhir td:anak-pertama ( -moz-perbatasan -radius: 0 0 0 5px !important; ) tabel tr:last-child td:last-child ( -moz-border-radius: 0 0 5px 0 !important; ) tabel tr:hover td ( warna latar: #ddd !penting)
Namun hal ini membuat saya tidak memiliki batas sel. Jika saya menambahkan batas, batasnya tidak bulat!
Ada solusi?
15 jawaban
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:
Tabel ( 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 ( warna latar: biru; batas atas: tidak ada; ) td:anak pertama, th:anak pertama ( batas kiri: tidak ada; )
| bla | sayang | sendok |
|---|---|---|
| bla | sayang | sendok |
| bla | sayang | sendok |
Pertama, Anda memerlukan lebih dari sekedar -moz-border-radius jika Anda ingin mendukung semua browser. Anda harus menentukan semua opsi, termasuk border-radius biasa, seperti ini:
Radius-perbatasan Moz: 5px; -radius-perbatasan webkit: 5px; radius batas: 5px;
Kedua, untuk menjawab pertanyaan Anda secara langsung, border-radius sebenarnya tidak menampilkan batas; itu hanya mengatur tampilan sudut perbatasan, jika ada.
Untuk memasukkan perbatasan dan dengan demikian mendapatkan sudut membulat, Anda juga memerlukan atribut border pada elemen td dan th Anda.
Td, th ( batas: hitam pekat 1 piksel; )
Anda juga akan melihat sudut membulat jika ada warna latar belakang(atau gambar), meskipun tentu saja elemen di sekitarnya harus memiliki warna latar belakang yang berbeda agar sudut membulat terlihat tanpa batas.
Perlu dicatat bahwa beberapa browser lama tidak suka menempatkan radius batas pada sel tabel/tabel. Mungkin layak untuk diposting
Oke, itu mengganggu saya, jadi saya melakukan beberapa pengujian.
Sepertinya hal penting yang Anda lewatkan adalah border-collapse:separate; dalam elemen tabel. Hal ini mencegah sel menghubungkan batasnya satu sama lain, sehingga memungkinkan sel memperoleh radius batas.
Semoga ini bisa membantu.
Unduh plugin, salin ke direktori di struktur solusi. Maka harus ada tag perilaku di stylesheet Anda agar dapat ditarik ke dalam plugin.
Contoh sederhana dari proyek saya yang memberi saya sudut membulat, gradien warna, dan bayangan kotak untuk tabel saya:
Tabel-kanvas ( -webkit-border-radius: 8px; -moz-border-radius: 8px; overflow: tersembunyi; border-radius: 10px; -pie-background: linear-gradient(#ece9d8, #E5ECD8); box- bayangan: #666 0px 2px 3px; perilaku: url(Sertakan/PIE.htc);
Jangan khawatir jika Intellisense Visual Studio CSS Anda memberi Anda sorotan hijau untuk properti yang tidak diketahui, itu masih berfungsi saat Anda menjalankannya. Beberapa elemen tidak didokumentasikan dengan jelas, namun contohnya cukup bagus, terutama di halaman pertama.
Tambahkan tag
:
| Barat Laut | Utara | paling utara | ||
| Barat | pusat | Timur | ||
| Barat Daya | Zuid | Zuidoost |
Warna sel, konten dan format, tentu saja, misalnya.
ini tentang jarak dari sel berisi warna di div. Jadi batas sel hitam/batas tabel sebenarnya adalah warna latar belakang div.
Perhatikan bahwa Anda perlu mengatur radius batas div menjadi sekitar 2 nilai lebih besar dari jari-jari batas sel individual untuk mendapatkan efek sudut membulat yang mulus.
CATATAN. Kode HTML/CSS di bawah ini hanya boleh dilihat di IE. Kode tidak akan ditampilkan dengan benar di Chrome!
Kita perlu mengingat bahwa:
Sebuah tabel memiliki batas: batas luarnya (yang juga dapat memiliki radius batas).
Sel itu sendiri juga memiliki batas (yang juga dapat memiliki radius batas).
Batas tabel dan sel dapat saling mengganggu:
Batas sel dapat menembus batas tabel (yaitu: batas tabel).
Untuk melihat efek ini, ubah aturannya gaya CSS pada kode di bawah ini sebagai berikut:
SAYA. tabel (runtuhnya batas: terpisah;)
II. Hapus aturan gaya yang terletak di sekitar sel sudut tabel.
AKU AKU AKU. Kemudian mainkan jarak antar batas sehingga Anda dapat melihat interferensinya.
Namun, batas tabel dan batas sel dapat DICOLLAPS (menggunakan: border-collapse: collaps;).
Saat diciutkan, batas sel dan tabel mengganggu dengan cara yang berbeda:
SAYA. Jika batas tabel berbentuk bulat namun batas sel tetap persegi, bentuk sel akan diutamakan dan tabel akan kehilangan sudut lengkungnya.
II. Sebaliknya, jika sel sudutnya melengkung tetapi batas tabelnya persegi, maka Anda akan melihat sudut persegi jelek yang membatasi kelengkungan sel sudut tersebut.
Mengingat atribut sel lebih diutamakan, cara membulatkan tabel di empat sudut adalah:
SAYA. Ciutkan batas pada tabel (menggunakan: border-collapse: collaps;).
II. Mengatur kelengkungan yang diinginkan pada sel sudut tabel.
AKU AKU AKU. Tidak masalah jika sudut tabel dibulatkan (yaitu radius batasnya boleh nol).
Zui-table-rounded ( border: 2px solid blue; /*border-radius: 20px;*/ border-collapse: collaps; 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 ( perbatasan -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 ( warna latar: #CFAD70; ) .zui-table-rounded tbody td ( batas atas: solid 1px #957030; warna latar: #EED592; )
| Nama | Posisi | Tinggi | Dilahirkan | Gaji |
|---|---|---|---|---|
| Sepupu DeMarcus | C | 6"11" | 08-13-1990 | $4,917,000 |
| Yesaya Thomas | hal | 5"9" | 02-07-1989 | $473,604 |
| Ben McLemore | S.G. | 6"5" | 02-11-1993 | $2,895,960 |
| Marcus Thornton | S.G. | 6"4" | 05-05-1987 | $7,000,000 |
| Jason Thompson | hal | 6"11" | 06-21-1986 | $3,001,000 |
Berikut ini adalah apa yang saya gunakan yang berhasil untuk saya browser yang berbeda jadi saya harap ini membantu seseorang di masa depan:
#contentblock th:anak pertama ( -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); radius-batas: 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; perilaku: url(/images/border-radius.htc); radius-batas: 0 6px 0 0 ) #contentblock tr:anak-terakhir td:anak-terakhir (radius-batas: 0 0 6px 0; -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; blok konten tr:anak terakhir td:anak pertama ( -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); radius batas: 0 0 0 6px )
Tentunya bagian #contentblock dapat diganti/diedit sesuai kebutuhan dan file border-radius.htc dapat Anda temukan dengan mencari di Google atau web browser favorit Anda.
Untuk tabel berbatas dan dapat digulir, gunakan ini (ganti variabel, $teks awal)
Jika Anda menggunakan thead , tfoot atau th , ganti saja tr:first-child dan tr-last-child dan td dengan keduanya.
#table-wrap ( border: $border solid $color-border; border-radius: $border-radius; ) tabel ( border-collapse: collaps; border-spacing: 0; ) tabel td ( border: $border solid $color -perbatasan; ) tabel td:anak pertama ( perbatasan-kiri: tidak ada; ) tabel td:anak terakhir ( perbatasan-kanan: tidak ada; ) tabel tr:anak pertama td ( perbatasan-atas: tidak ada; ) tabel tr: anak terakhir td ( batas bawah: tidak ada; ) tabel tr:anak pertama td:anak pertama ( batas-kiri-radius: $batas-radius; ) tabel tr:anak pertama td:anak terakhir ( batas-kanan-radius-atas: $batas-radius; ) tabel tr:anak terakhir td:anak pertama ( batas-bawah-kiri-radius: $batas-radius; ) tabel tr:anak terakhir td:terakhir- anak ( radius-batas-kanan-bawah: $radius-batas; )
| 1 | 2 |
| 3 | 4 |
Anda dapat mencoba ini jika Anda ingin sudut membulat di setiap sisi tabel tanpa menyentuh sel: http://jsfiddle.net/7veZQ/3983/
| A | B |
| C | D |
Contoh HTML
| Kepala1 | Kepala2 | Kepala3 |
|---|---|---|
| tbody1 baris1 | tbody1 baris1 | tbody1 baris1 |
| tbody1 baris2 | tbody1 baris2 | tbody1 baris2 |
| tbody2 baris1 | tbody2 baris1 | tbody2 baris1 |
| tbody2 baris2 | tbody2 baris2 | tbody2 baris2 |
| tbody3 baris1 | tbody3 baris1 | tbody3 baris1 |
| tbody3 baris2 | tbody3 baris2 | tbody3 baris2 |
| Kaki | Kaki | Kaki |
SCSS dengan mudah dikonversi ke CSS, gunakan sassmeister.com
// Tabel CSS umum, th, td ( border: 1px solid #000; padding: 8px 12px; ) .round-corner ( border-collapse: collaps; border-style: tersembunyi; box-shadow: 0 0 0 1px #000 ; // radius batas "perbatasan" palsu: 4px; // Mungkin tidak ada THEAD setelah teksnya? kiri -radius: 4px; ) td:anak terakhir, th:anak terakhir ( batas-kanan-radius: 4px; batas kanan: tidak ada; ) ) ) tbody:anak pertama ( tr:anak pertama ( td :anak pertama, th:anak pertama ( batas-kiri-radius-atas: 4px; ) td:anak-terakhir, th:anak-terakhir ( batas-kanan-radius-atas: 4px; batas-kanan: tidak ada ; ) ) ) tbody:anak terakhir ( tr:anak terakhir ( td:anak pertama, th:anak pertama ( batas-kiri-bawah-radius: 4px; ) td:anak terakhir, th:anak terakhir ( border-right-radius-bawah: 4px; border-right: none; ) ) thead ( tr:last-child ( td:first-child, th:first-child ( border-top-left-radius: 4px; ) td:anak terakhir, th:anak terakhir ( batas-kanan-radius: 4px;
kanan perbatasan: tidak ada; ) ) ) tfoot ( tr:anak-terakhir ( td:anak-pertama, th:anak-pertama ( batas-bawah-kiri-radius: 4px; ) td:anak-terakhir, th:anak-terakhir ( perbatasan-bawah- radius kanan: 4px; batas kanan: tidak ada ) ) ) // Reset tabel di dalam tabel tabel tr th, tabel tr td ( radius batas: 0; ) ) Dan datanya
Bagan donat
menampilkan nilai sebagai persentase dari segalanya dan merupakan format bagan yang tersedia untuk digunakan di Microsoft PowerPoint 2010 dan 2013. Kategori disajikan dalam masing-masing bagian. Bagan donat secara fungsional identik dengan diagram lingkaran dalam artian Anda dapat menampilkan data yang hampir sama. Ada dua jenis diagram: donat donat dan donat meledak.
Cara utama membuat donat bagan adalah dengan menggunakan galeri saat menyisipkan bagan.
Pilih Sisipkan -> Bagan lalu pilih Donat dari daftar.
Sekarang Anda dapat mengkustomisasi bagan dengan menambahkan data ke tabel. Jika Anda perlu menambahkan rangkaian data baru dari lingkaran konsentris dalam grafik, Anda dapat menambahkan kolom baru pada pilihan data di spreadsheet.
Cara lain untuk membuat Bagan Donat di PowerPoint 2010
Sesuaikan diagram lingkaran untuk menampilkan data yang Anda inginkan. Kemudian tambahkan lingkaran sederhana di tengah diagram lingkaran.
Sekarang ulangi prosesnya dan tambahkan lingkaran konsentris tambahan di tengah bentuk lingkaran pertama yang telah ditambahkan.
Sekarang, mari kita isi formulir pertama dengan latar belakang putih dan formulir kedua (bagian dalam) dengan latar belakang gaya yang bagus. Anda dapat menggunakan gradien seperti gaya gradien radial plus efek yang bagus bayangan.
Di sini Anda memiliki elemen individual yang akan kita gunakan untuk membuat grafik donat. Dua bentuk yang dilingkari dan diagram lingkaran.
Anda dapat mengkustomisasi lingkaran dalam dengan mengubah properti format Bentuk.
Akhirnya, bagan donat yang dapat diedit akan terlihat seperti ini.
Anda dapat mempelajari lebih lanjut tentang cara merepresentasikan data Anda dalam diagram toroidal, mengunduh templat diagram donat, atau Anda dapat mengunduh templat PowerPoint dan diagram gratis. Jika Anda membutuhkan template ini, jangan ragu untuk menghubungi kami, kami dapat mengirimkannya kepada Anda.
Setiap orang sudah lama bosan dengan sudut persegi panjang tradisional dalam desain situs web. Sudut membulat sedang populer, yang dibuat bukan menggunakan gambar, tetapi melalui gaya yang menggunakan properti radius batas. Properti ini dapat memiliki satu, dua, tiga atau empat nilai yang dipisahkan oleh spasi, yang menentukan jari-jari semua sudut atau masing-masing sudut secara individual.
Dalam tabel 1 menunjukkan jumlah nilai berbeda dan jenis blok yang diperoleh dalam kasus ini.
| Kode | Keterangan | Melihat |
|---|---|---|
| div (radius batas: 10px; ) | Jari-jari pembulatan untuk semua sudut sekaligus. | |
| div (radius batas: 0 10px; ) | Nilai pertama menetapkan radius sudut kiri atas dan kanan bawah, nilai kedua menetapkan radius sudut kanan atas dan kiri bawah. |  |
| div (radius batas: 20px 10px 0; ) | Nilai pertama menentukan jari-jari sudut kiri atas, nilai kedua menentukan kanan atas dan kiri bawah, dan nilai ketiga menentukan kanan bawah. |  |
| div (radius batas: 20px 10px 5px 0; ) | Mengatur radius sudut kiri atas, kanan atas, kanan bawah, dan kiri bawah secara berurutan. |  |
Contoh 1 menunjukkan cara membuat balok dengan sudut membulat.
Contoh 1. Sudut-sudut suatu balok
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Hasil contoh ini ditunjukkan pada Gambar. 1.
Beras. 1. Blok dengan sudut membulat
Efek menarik dapat diperoleh jika Anda mengatur radius pembulatan lebih besar dari setengah tinggi dan lebar elemen. Dalam hal ini, Anda akan mendapatkan lingkaran. Contoh 2 menunjukkan cara membuat tombol bulat dengan gambar.
Contoh 2: Tombol bulat
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Hasil dari contoh ini ditunjukkan pada Gambar. 2.
Beras. 2. Tombol bulat
DI DALAM peramban Opera pembulatan ke
Properti border-radius dapat digabungkan dengan properti lain, misalnya menambahkan bayangan ke suatu elemen. Pada contoh 3, dibuat sekumpulan lingkaran, salah satunya disorot menggunakan box-shadow . Kumpulan ini dapat digunakan untuk menavigasi halaman atau foto.
Contoh 3. Bersinar
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Hasil dari contoh ini ditunjukkan pada Gambar. 3.
Beras. 3. Bersinar di sekeliling lingkaran
DENGAN menggunakan radius batas Anda tidak hanya dapat membuat lingkaran, tetapi juga elips, serta pembulatan elips pada balok. Untuk melakukan ini, Anda perlu menulis bukan hanya satu nilai, tetapi dua, dipisahkan dengan garis miring. Penulisan 20px/10px berarti radius horizontal fillet adalah 20 piksel, dan radius vertikal adalah 10 piksel. Contoh 4 menunjukkan cara membuat sudut elips untuk menambahkan keterangan gaya buku komik ke foto.
Contoh 4: Elips
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Hasil dari contoh ini ditunjukkan pada Gambar. 4.
Beras. 4. Menggunakan sudut elips
Anda juga dapat mengubah tampilan sudut pada gambar dengan menambahkan properti border-radius ke pemilih img, seperti yang ditunjukkan pada Contoh 5.
Contoh 5: Gambar
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Anggaplah pengguna memiliki data dalam nilai absolut. Dia perlu menampilkan informasi pada diagram. Untuk kejelasan yang lebih baik, perlu untuk menunjukkan nilai data relatif. Misalnya berapa persen rencana yang terselesaikan, berapa banyak produk yang terjual, berapa banyak siswa yang menyelesaikan tugas, berapa persentase karyawan yang berpendidikan tinggi, dan sebagainya.
Ini tidak terlalu sulit untuk dilakukan. Namun jika Anda tidak memiliki keterampilan untuk bekerja program Unggul, beberapa kesulitan mungkin timbul. Mari kita lihat lebih dekat cara membuat grafik persentase di Excel.
Grafik persentase pai
Mari kita buat diagram lingkaran distribusi persentase. Misalnya, mari kita ambil analisis pajak resmi “Penerimaan menurut jenis pajak dalam anggaran konsolidasi Federasi Rusia untuk 2015" (informasi dari situs web Layanan Pajak Federal):
Pilih seluruh tabel, termasuk nama kolom. Pada tab “Sisipkan”, di grup “Bagan”, pilih pai sederhana.
Segera setelah mengklik tab dari jenis yang dipilih, diagram seperti ini muncul di lembar:
Segmen lingkaran yang terpisah adalah bagian dari setiap pajak jumlah total pendapatan terhadap anggaran konsolidasi pada tahun 2015.
Sekarang mari kita tunjukkan pada diagram persentase jenis pajak. Mari kita klik kanan padanya. Di kotak dialog yang terbuka, pilih tugas “Tambahkan tanda tangan data”.
Nilai dari kolom kedua tabel akan muncul di bagian lingkaran:
Klik kanan lagi pada diagram dan pilih “Format Data Labels”:
Di menu yang terbuka, di subgrup "Opsi Tanda Tangan", Anda perlu menghapus centang pada kotak di samping "Sertakan nilai dalam tanda tangan" dan letakkan di samping "Sertakan bagian dalam tanda tangan".
Di subgrup “Nomor”, ubah format umum menjadi persentase. Hapus tempat desimal dan atur kode format ke “0%”.
Jika Anda perlu menampilkan persentase dengan satu tempat desimal, setel “0,0%” di kolom “Kode format”. Dengan dua tempat desimal – “0,00%”. Dan sebagainya.
Pengaturan standar memungkinkan Anda mengubah lokasi label pada diagram. Opsi yang memungkinkan:
- "Di tengah" - keterangan akan ditampilkan di tengah segmen;
- “Di atas, di dalam” - label akan ditampilkan di bagian dalam lingkaran;
- "Di atas, di luar" - label akan muncul di luar lingkaran; ketika Anda memilih opsi ini, diagram itu sendiri akan sedikit lebih kecil, tetapi jika ada data kecil, keterbacaan meningkat;
- "Fit to width" - parameter memungkinkan Excel untuk mengatur tanda tangan secara optimal.
Untuk mengubah arah label, di subgrup Alignment, Anda dapat menggunakan alat Text Direction. Sudut kemiringan juga diatur di sini.
Pilih arah horizontal label data dan posisi “Lebar”.
Bagan lingkaran siap dengan penuh minat. Grafik tersebut menunjukkan persentase distribusi penerimaan pajak.
Histogram kolom
Mari tambahkan kolom tambahan pada tabel: 1 – dengan persentase (persentase kontribusi setiap jenis pajak terhadap total); 2 – 100%.
Klik pada sel tabel mana pun. Buka tab "Sisipkan". Di grup “Bagan”, pilih “Histogram tumpuk yang dinormalisasi”.
Muncul secara otomatis diagram ini tidak menyelesaikan masalah. Oleh karena itu, pada tab “Desain”, di grup “Data”, buka item “Pilih data”.
Dengan menggunakan tanda panah, kita ubah urutan barisnya sehingga persentasenya berada di bawah. Seri yang menunjukkan nilai absolut akan dihapus. Di “Kategori”, hapus sel “Jenis pajak”. Judul tidak boleh berupa label sumbu horizontal.
Pilih kolom mana pun dari bagan yang dibuat. Buka tab "Tata Letak". Di grup “Fragmen saat ini”, klik “Format fragmen yang dipilih”.
Di menu yang terbuka, buka tab “Parameter Seri”. Tetapkan nilai tumpang tindih baris menjadi 100%.
Sebagai hasil dari pekerjaan yang dilakukan, kami mendapatkan diagram seperti ini:
Diagram ini memberikan gambaran umum tentang persentase jenis pajak dalam anggaran konsolidasi Federasi Rusia.
Ada banyak contoh dan tutorial di Internet untuk membulatkan sudut balok atau tabel, tetapi biasanya tutorial ini didasarkan pada penggunaan gambar atau penggunaan balok tambahan.
Dalam tutorial hari ini saya akan menunjukkan kepada Anda bagaimana Anda bisa sudut meja bundar hanya menggunakan CSS.
Markup langsung (Tabel kedua berbeda dalam tata letak sel di dalamnya baris teratas):
| Nulla gravida. | Anda Agustus. | Nunc iaculis bibendum. | |
| Ruang depan sementara | Laoreet eros semper ut. | ||
| Vivamus quis nisi lacus. | Cras id felis eu purus tempor diktum di lorem. | facilisis iaculis magna diam id quam. | eleifend. |
Kursus Pellentesque, nunc ut facilisis hendrerit
1. Bulatkan sudut tepat pada meja (table tag).
BContentTables( perbatasan:1px solid #CCCCCC; lebar:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10 piksel; /* KHTML */ -o-batas-radius: 10 piksel; /* Opera */ -ms-batas-radius: 10 piksel; /* IE8 */ radius-batas: 10 piksel; ; margin:0,7em otomatis;
2. Hapus semua latar belakang dari baris pertama.
Tr.bCTable_Header (latar belakang: tidak ada;) 3. Menggunakan pseudo-class:first-child dan kombinator > pilih sel pertama dalam tabel. Bulatkan sel kiri pada sel pertama sudut atas
. Latar belakang baris pertama terdiri dari latar belakang sel-sel baris ini.
Tr.bCTable_Header:anak pertama > td:anak pertama( radius-batas:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- radius-batas:10px 0 0 0; -o-radius-perbatasan:10px 0 0 0; -khtml-radius-perbatasan: 10px 0 0 0 ) tr.bCTable_Header td( warna:putih; ukuran font:110%; warna latar belakang:#00843C;)
Tr.bCTable_Header:anak pertama > td:anak terakhir( radius-batas:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- radius-batas:0 10px 0 0; -o-radius-perbatasan:0 10px 0 0; -khtml-radius-perbatasan: 0 10px 0 0);
5. Bulatkan sudut bawah baris terakhir. Jangan lupa untuk menghapus background dari baris terakhir; Latar belakang baris diatur oleh latar belakang sel baris terakhir.
BContentTables tr:anak terakhir( radius-batas:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10 piksel; -o-radius batas: 0 0 10 piksel 10 piksel; -khtml-radius batas: 0 0 10 piksel 10 piksel;
6. Kemudian, dengan analogi poin 3-4, pada baris terakhir kita membulatkan sudut sel pertama dan terluar.
BContentTables tr:anak terakhir td(warna latar:#F1F1F2;) .bContentTables tr:anak terakhir td:anak pertama( radius batas:0 0 0 10 piksel; -webkit-batas-radius:0 0 0 10 piksel; -moz-batas-radius:0 0 0 10 piksel; -ms-batas-radius:0 0 0 10 piksel; -o-batas-radius:0 0 0 10 piksel; -khtml-batas-radius: 0 0 0 10 piksel;) . bContentTables tr:anak-terakhir td:anak-terakhir (radius-perbatasan:0 0 10px 0; -webkit-perbatasan-radius:0 0 10px 0; -moz-perbatasan-radius:0 0 10px 0; -ms-perbatasan- radius:0 0 10px 0; -o-batas-radius:0 0 10px 0; -khtml-batas-radius: 0 0 10px 0);
Dukungan peramban
