Mengapa Sempadan Bawah Baris Jadual Saya Tidak Muncul Menggunakan CSS?

Cara Menambah Sempadan pada Bahagian Bawah Baris Jadual

Anda mempunyai meja 3x3 dan anda mahu menambah sempadan ke bahagian bawah setiap baris. Anda cuba menambah atribut gaya terus pada elemen, tetapi itu tidak berjaya. Anda kemudian menambahkan CSS seperti ini:

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

Tetapi itu masih tidak berjaya. Anda lebih suka menggunakan CSS, jadi anda tidak perlu menambahkan atribut gaya pada setiap baris.

Masalahnya ialah anda belum menambahkan border-collapse:collapse pada peraturan jadual anda. Sifat ini memberitahu penyemak imbas untuk meruntuhkan sempadan sel bersebelahan. Tanpa itu, sempadan akan dilukis di atas satu sama lain, menjadikannya sukar untuk melihat garisan.

Untuk membetulkan isu itu, tambahkan border-collapse:collapse pada peraturan jadual anda:

table {
border-collapse: collapse;
}

Berikut ialah contoh:

table {
border-collapse: collapse;
}

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

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

Ini akan menambah jidar hitam 1pt ke bahagian bawah setiap baris dalam anda meja.

Atas ialah kandungan terperinci Mengapa Sempadan Bawah Baris Jadual Saya Tidak Muncul Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!