Bagaimana untuk Menambah Ruang Antara Baris dalam Jadual Tanpa Menggunakan CSS?

Cara Menjarakkan Antara Baris dalam Jadual Tanpa Menggunakan CSS

Anda mungkin tertanya-tanya sama ada anda boleh menambah ruang antara baris dalam jadual menggunakan CSS. Malangnya, jarak sempadan sifat CSS tidak mencapai kesan yang diingini ini. Sifat jarak sempadan hanya menambah ruang antara sel jadual, bukan antara baris.

Sebaliknya, anda perlu menggunakan pelapik pada elemen untuk menambah ruang antara baris. Anda boleh menggunakan kod CSS berikut:

tr.classname td {
  padding-bottom: 5em;
}

Ini akan menambah 5em padding ke bahagian bawah setiap elemen dalam dengan nama kelas kelas. Anda boleh melaraskan jumlah pelapik mengikut keperluan.

Berikut ialah contoh cara ini berfungsi:

<table class="classname">
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
    </tr>
    <tr>
      <td>Cell C</td>
      <td>Cell D</td>
    </tr>
  </tbody>
</table>

Ini akan mencipta jadual dengan 5em ruang antara setiap baris.

Perhatikan bahawa anda juga boleh menggunakan padding atas dan bukannya padding bawah, bergantung pada kesan yang anda inginkan.

Jika anda perlu menambah ruang antara baris dalam jadual bersarang, anda boleh menggunakan kod CSS berikut :

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

Ini akan menambah 1em padding ke bahagian bawah setiap elemen yang merupakan anak langsung kepada elemen dengan ruang kelasDi bawah.

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