Bagaimana Membuat Sudut Meja Bulat Hanya Menggunakan CSS?

Sudut Meja Bulat CSS Sahaja

Mencipta jadual dengan bucu bulat menggunakan CSS sahaja terbukti sebagai cabaran biasa. Artikel ini menangani isu ini, mengemukakan penyelesaian yang mengelakkan penggunaan imej atau JavaScript.

Untuk mencapai sudut bulat, sifat jejari sempadan jadual digunakan. Selain itu, sempadan berasingan ditambahkan pada setiap sel untuk mengekalkan rupa bulat. Coretan CSS berikut menunjukkan pendekatan ini:

table {
  border-collapse:separate;
  border:solid black 1px;
  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;
}

Dalam contoh ini, jadual mempunyai latar belakang biru untuk pengepala dan sempadan hitam pejal di sekeliling keseluruhan jadual dan setiap sel. Sifat jejari sempadan menetapkan jejari sudut untuk jadual. Untuk mengelakkan sempadan daripada mengganggu penampilan bulat, ia ditambah sebagai sempadan berasingan untuk setiap sel dan pengepala. Ini memastikan sudut bulat kekal utuh walaupun terdapat sempadan.

Atas ialah kandungan terperinci Bagaimana Membuat Sudut Meja Bulat Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!