Bagaimana untuk Menambah Ruang Antara Baris dalam Jadual Menggunakan CSS?

Cara Mencipta Ruang Antara Baris dalam Jadual

Soalan:

Adakah mungkin untuk menambah ruang antara baris dalam jadual menggunakan CSS? Kod berikut tidak menghasilkan hasil yang diingini:

tr.classname {
  border-spacing: 5em;
}

Jawapan:

Untuk mencipta ruang antara baris dalam jadual, anda perlu menggunakan padding pada td elemen. Anda boleh menggunakan kod CSS berikut:

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

Dalam kod ini, tr.spaceUnder > Pemilih td menggunakan padding hanya pada elemen td yang merupakan anak langsung unsur tr dengan class spaceUnder. Ini membolehkan anda menggunakan jadual bersarang tanpa menjejaskan jarak antara baris.

Contoh:

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

Output:

A	B
C	D
E	F

Atas ialah kandungan terperinci Bagaimana untuk Menambah Ruang Antara Baris dalam Jadual Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!