Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah saya boleh mencapai sudut bulat untuk keseluruhan jadual menggunakan CSS apabila jejari sempadan tidak boleh digunakan terus pada baris jadual?

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

Susan Sarandon
Susan Sarandonasal
2024-10-31 06:39:02440semak imbas

How can I achieve rounded corners for an entire table using CSS when border-radius cannot be applied directly to table rows?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn