Bagaimana untuk Mencapai Sudut Meja Bulat Hanya Menggunakan CSS?

Sudut Meja Bulat dengan CSS Sahaja

Pengguna yang ingin mencapai sudut bulat pada jadual HTML dengan hanya CSS mungkin menghadapi kesukaran mencari penyelesaian yang mengekalkan sempadan meja. Berikut ialah pendekatan komprehensif yang menangani isu ini:

Pelaksanaan CSS

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

Penjelasan

Pertama, menetapkan sempadan- runtuh: berasingan membolehkan sempadan muncul antara sel. Kemudian, sifat sempadan mentakrifkan sempadan luar jadual. Jejari sempadan menghasilkan bucu bulat.

Dalam sel dan pengepala, jidar-kiri dan atas sempadan tentukan jidar menegak dan mendatar, masing-masing. Pengepala mempunyai latar belakang biru untuk mempamerkan sudut bulat. Selain itu, bahagian atas sempadan dialih keluar untuk pengepala bagi mengelakkan pertindihan dengan sempadan luar jadual.

Akhir sekali, mengalih keluar sempadan-kiri pada sel dan pengepala pertama menghapuskan sempadan menegak yang tidak perlu. Ini menghasilkan bucu bulat untuk semua sel penjuru sambil mengekalkan sempadan menegak dan mendatar dalam jadual.

Contoh Penggunaan

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

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