Bagaimanakah Saya Boleh Menambah Sempadan Bawah pada Setiap Baris Jadual Menggunakan CSS?

Menambah Sempadan ke Bawah Baris Jadual

Soalan

Menambah jidar ke bahagian bawah setiap baris jadual menggunakan CSS nampaknya mencabar. Penggayaan langsung elemen tr atau menggunakan peraturan CSS pada tr tidak menghasilkan hasil yang diingini. Adakah terdapat cara yang lebih baik untuk mencapai ini tanpa penggayaan sebaris?

Penyelesaian

Untuk berjaya menambahkan jidar pada bahagian bawah setiap baris jadual menggunakan CSS, anda boleh menggunakan sifat runtuh sempadan. Dengan menetapkan sifat ini untuk runtuh dalam peraturan CSS jadual, jidar jadual bergabung bersama.

table { 
    border-collapse: collapse; 
}

Ini membolehkan anda kemudiannya menggunakan gaya jidar menggunakan sifat sempadan bawah dalam peraturan CSS tr.

tr {
  border-bottom: 1pt solid black;
}

Contoh

Pertimbangkan 3x3 jadual:

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

Menggunakan peraturan CSS akan menghasilkan jadual dengan sempadan hanya di bahagian bawah setiap baris:

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1pt solid black;
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Sempadan Bawah pada Setiap Baris Jadual Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!