Bagaimanakah anda menambah ruang menegak antara baris jadual dalam HTML?

Pemisahan Ruang dalam Jadual HTML: Panduan Komprehensif

Sebagai pembangun web, kami sering bekerja dengan jadual untuk mempersembahkan data secara berstruktur. Walau bagaimanapun, situasi mungkin timbul apabila anda memerlukan pemisahan menegak tambahan antara baris jadual, melebihi apa yang biasanya disediakan oleh penyemak imbas. Bolehkah ini dicapai menggunakan CSS?

CSS untuk Jarak Baris Meja

Satu tanggapan salah biasa ialah jarak sempadan sifat CSS boleh digunakan untuk menambah ruang menegak antara jadual barisan. Walaupun ia melaraskan jarak antara sel jadual, ia tidak menjejaskan jarak menegak antara baris.

Penyelesaian: Menampal kepada Penyelamat

Untuk mencipta ruang antara baris jadual , kuncinya terletak pada penggunaan padding pada sel jadual individu (). Pertimbangkan kod CSS berikut:

tr.spaceUnder>td {
  padding-bottom: 1em;
}

Elemen td dalam baris tr yang mengandungi ruang kelasUnder akan menerima padding bawah 1em, dengan berkesan menolak baris tersebut lebih jauh. Ini membolehkan anda membuat jarak menegak antara baris yang dipilih sambil mengekalkan struktur jadual yang bersih dan teratur.

Pertimbangan Tambahan

Perhatikan bahawa penyelesaian ini hanya beroperasi pada anak langsung tr elemen. Ini membolehkan penciptaan jadual bersarang dengan jarak berbeza antara bahagian, seperti yang ditunjukkan dalam kod di bawah:

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Atas ialah kandungan terperinci Bagaimanakah anda menambah ruang menegak antara baris jadual dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!