Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menambah Sudut Bulat pada Baris Jadual dalam HTML?

Bagaimana untuk Menambah Sudut Bulat pada Baris Jadual dalam HTML?

Patricia Arquette
Patricia Arquetteasal
2024-10-31 06:32:01998semak imbas

How to Add Rounded Corners to Table Rows in 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!

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