Bagaimana untuk Menambah Sudut Bulat pada Baris Jadual dalam HTML?

Menggayakan Baris Jadual dengan Jejari Sempadan

Dalam jadual HTML, elemen mewakili baris jadual. Walaupun mungkin untuk menambah jidar pepejal pada baris jadual menggunakan runtuhan sempadan, menambah bucu bulat pada baris memberikan cabaran.

Untuk mengatasi had ini, anda boleh menggunakan gaya CSS berikut:

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

Gaya ini mencapai perkara berikut:

• Tetapkan sifat runtuh sempadan untuk dipisahkan untuk mengekalkan jidar di dalam sel jadual.
• Gunakan jidar pepejal pada elemen.
• Tekan sempadan atas dan kiri untuk kebanyakan elemen.
• Gunakan bucu bulat pada penjuru kiri atas dan kanan atas baris pertama.
• Gunakan bucu bulat pada penjuru kiri bawah dan kanan bawah baris terakhir.
• Pulihkan sempadan atas untuk elemen dalam baris pertama dan sempadan kiri untuk elemen dalam lajur pertama.

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