Bagaimanakah saya boleh mencapai sudut bulat untuk keseluruhan jadual menggunakan CSS apabila jejari sempadan tidak boleh digunakan terus pada baris jadual?

Memohon Jejari Sempadan pada Baris Jadual

Ramai pembangun menghadapi kesukaran apabila cuba menyesuaikan penampilan baris jadual ( ). Satu cabaran sedemikian timbul apabila cuba menggunakan jejari sempadan pada elemen tr.

Untuk menangani isu ini, adalah penting untuk memahami bahawa jejari sempadan hanya boleh digunakan pada sel individu () dalam jadual , bukan kepada baris atau jadual itu sendiri. Walau bagaimanapun, terdapat penyelesaian yang bijak untuk mencapai sudut bulat untuk keseluruhan jadual:

Penggayaan CSS

Helah utama terletak pada mengasingkan sempadan jadual untuk setiap sel menggunakan sempadan -runtuh: harta berasingan. Selain itu, gaya sempadan boleh ditetapkan untuk memperhalusi penampilan. Coretan kod CSS berikut memberikan contoh:

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

Contoh HTML

Setelah peraturan gaya CSS ditakrifkan, penggunaannya pada jadual anda adalah mudah:

<code class="html"><table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table></code>

Penyelesaian ini mengubah sel individu menjadi blok binaan, membolehkan kawalan sepenuhnya ke atas penampilan meja, termasuk sudut bulat.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencapai sudut bulat untuk keseluruhan jadual menggunakan CSS apabila jejari sempadan tidak boleh digunakan terus pada baris jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!