Bagaimanakah saya boleh menggunakan sudut bulat pada baris jadual menggunakan CSS apabila aplikasi jejari sempadan langsung adalah terhad?

Menggunakan Jejari Sempadan pada Baris Jadual

Sambil menyesuaikan penampilan baris jadual (

), keupayaan untuk menggunakan jejari sempadan terus kepada mereka boleh terhad. Berikut ialah penyelesaian menggunakan gaya CSS:

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

Penyelesaian ini menetapkan sempadan sel data jadual individu (

) untuk membentuk sempadan yang dikehendaki di sekeliling baris. Sifat runtuh sempadan dan jarak sempadan memastikan bahawa sel diasingkan dan tidak bertindih.

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

Dengan menggunakan penyelesaian ini, anda boleh mencapai sudut bulat untuk baris meja anda, dengan berkesan meningkatkan daya tarikan visualnya.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan sudut bulat pada baris jadual menggunakan CSS apabila aplikasi jejari sempadan langsung adalah terhad?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!