Bagaimana untuk Menghapuskan Jurang Antara Elemen Jadual dalam HTML?

Menghapuskan Jurang Antara Elemen Jadual

Tugas di tangan melibatkan mengalih keluar jarak tambahan antara baris dan lajur dalam jadual. Walaupun melaraskan jidar, pelapik dan sifat sempadan pelbagai elemen jadual, isu ini berterusan. Matlamatnya adalah untuk menjajarkan imej dengan lancar untuk mencipta ilusi imej tunggal yang padu.

Melaksanakan Penyelesaian

Seperti yang dinyatakan dengan tepat oleh vectran, set sifat runtuh sempadan untuk runtuh dengan berkesan menghapuskan sempadan sel dan menggabungkan sel bersebelahan. Ini menghasilkan penampilan yang lancar, dengan sel kelihatan mengalir bersama. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa penyemak imbas lama seperti Internet Explorer 6 dan 7 memerlukan langkah tambahan.

Untuk memastikan keserasian merentas penyemak imbas, termasuk atribut jarak sel terus ke jadual adalah penting. Menetapkan nilai 0 pada atribut ini mengalih keluar sebarang jarak lalai.

Pelaksanaan Khusus Penyemak Imbas

Internet Explorer versi 8 dan ke atas, bersama-sama dengan penyemak imbas moden yang lain seperti Chrome , Firefox dan Opera 4 , menyokong jarak sempadan sifat CSS. Sifat ini membenarkan kawalan tepat ke atas jarak antara sempadan, termasuk menetapkannya kepada 0 untuk menghapuskan jurang.

Untuk memenuhi IE6 dan IE7, secara eksplisit menentukan jarak sel pada 0 sebagai atribut jadual adalah perlu. Untuk penyelesaian silang penyemak imbas, adalah disyorkan untuk menggabungkan kedua-dua sifat jarak sempadan dan jarak sel.

Contoh Kod

table {
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}

table.no-spacing {
  border-spacing: 0; /* Removes the cell spacing via CSS */
  border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */
}

<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Jurang Antara Elemen Jadual dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!