Bagaimana untuk Menambah Sudut Bulat pada Sel Jadual Menggunakan CSS?

Menggunakan Jejari Sempadan pada Sel Jadual

Untuk menambah sudut bulat pada baris jadual (tr), pertimbangkan pendekatan berikut:

• Penghadan CSS: Ambil perhatian bahawa anda tidak boleh terus menggunakan jejari sempadan pada tr atau elemen jadual. Sebaliknya, anda mesti menggunakannya pada sel jadual individu (td).
• Asingkan Sempadan dan Padding untuk Sel:

<code class="css">table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}</code>

• Gaya Penjuru:

<code class="css">tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }

tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }</code>

• Gaya Sempadan untuk Sel Atas dan Kiri:

<code class="css">tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }</code>

Teknik ini membolehkan penciptaan sudut bulat di atas meja sambil mengekalkan sempadan dan jarak yang dikehendaki.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Sudut Bulat pada Sel Jadual Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!