Bagaimana untuk Memohon Jejari Sempadan pada Baris Jadual dalam HTML?

Cara Menggunakan Jejari Sempadan pada Baris Jadual

Apabila menggayakan jadual HTML, pembangun sering menghadapi had apabila cuba menggunakan gaya pada baris jadual (). Semasa menyediakan gaya sempadan dengan runtuhan sempadan membenarkan sempadan sekitar elemen dalam jadual, ia tidak meluas ke elemen itu sendiri.

Isu biasa timbul apabila cuba menggunakan jejari sempadan (-moz-jejari-sempadan atau jejari sempadan moden) pada baris jadual. Malangnya, harta ini tidak boleh digunakan terus pada elemen.

Penyelesaian:

Memandangkan had ini, penyelesaian diperlukan untuk mencapai sudut bulat pada baris meja. Penyelesaiannya melibatkan penggunaan strategi penggayaan sempadan kepada individu elemen:

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

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

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

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

Kaedah ini mencipta ilusi sudut bulat pada baris meja dengan menetapkan gaya sempadan dan jejari tertentu pada elemen pada permulaan dan akhir setiap baris. Keruntuhan sempadan: sifat berasingan adalah penting, kerana ia membenarkan sempadan digunakan pada setiap sel secara individu, membolehkan kesan penggayaan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Memohon Jejari Sempadan pada Baris Jadual dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!