Penjelasan terperinci tentang cara mengalih keluar sempadan daripada jadual CSS

Mengalih keluar sempadan daripada jadual CSS ialah kemahiran yang sangat asas dalam pembangunan bahagian hadapan dengan berkesan dapat meningkatkan keindahan jadual dan menjadikannya lebih konsisten dengan gaya reka bentuk halaman. Dalam kerja sebenar, kita selalunya perlu mengalih keluar sempadan jadual Artikel ini akan menerangkan secara terperinci kaedah mengalih keluar sempadan daripada jadual CSS.

1. Struktur asas jadual CSS

Sebelum kita mula belajar mengalih keluar sempadan daripada jadual CSS, mari kita fahami struktur asas jadual CSS. Struktur asas jadual CSS dibahagikan kepada empat elemen asas: jadual (jadual), baris jadual (tr), sel jadual (td) dan sel pengepala (th). Antaranya, baris jadual (tr) dan sel jadual (td) diperlukan, manakala sel pengepala (th) boleh ditambah mengikut keperluan sebenar.

Berikut ialah struktur jadual CSS asas:

<table>
  <tr>
    <th>表头单元格</th>
    <th>表头单元格</th>
  </tr>
  <tr>
    <td>表格单元格</td>
    <td>表格单元格</td>
  </tr>
  <tr>
    <td>表格单元格</td>
    <td>表格单元格</td>
  </tr>
</table>

2 Kaedah untuk membuang sempadan daripada jadual CSS

Kaedah untuk membuang sempadan daripada jadual CSS agak mudah. , anda boleh menggunakan Dua jenis berikut:

1 Gunakan atribut sempadan untuk ditetapkan kepada 0

Apabila kita menetapkan atribut sempadan kepada 0, sempadan jadual akan dialih keluar.

table, tr, td {
  border:0;
}

2. Gunakan atribut runtuhan sempadan untuk menetapkannya supaya runtuh

Atribut runtuhan sempadan digunakan untuk menetapkan kaedah penggabungan sempadan jadual. Apabila ditetapkan untuk runtuh, sempadan jadual akan digabungkan, dengan itu mencapai kesan mengalih keluar sempadan jadual.

table {
  border-collapse:collapse;
}

3. Pemprosesan jarak jadual CSS

Apabila kita menggunakan dua kaedah di atas untuk mengalih keluar sempadan jadual, mungkin terdapat jarak tertentu antara sel jadual, menyebabkan jadual kepada Estetika terjejas. Untuk menyelesaikan masalah ini, kita boleh menggunakan sifat padding CSS untuk melaraskan sel jadual.

table {
  border-collapse:collapse;
}
td {
  padding:0;
}

4. Pelarasan lain pada gaya jadual CSS

Selain mengalihkan sempadan dan jarak daripada jadual, kami juga boleh membuat pelarasan lain kepada gaya jadual mengikut keperluan sebenar.

1. Menetapkan lebar jadual

Kita boleh menggunakan atribut lebar untuk menetapkan lebar jadual, atau menggunakan peratusan untuk melaraskan lebar relatif.

table {
  width:100%;
}

2. Pelarasan penjajaran menegak sel jadual

Kadang-kadang, kandungan sel jadual tidak banyak, dan masalah penjajaran menegak akan berlaku. Kita boleh menggunakan atribut penjajaran menegak untuk melaraskan sel jadual.

td {
  vertical-align:middle;
}

3. Pemprosesan sel pengepala

Sel pengepala biasanya memerlukan pemprosesan khas dan anda boleh menetapkan fon tebal, warna latar belakang, dsb.

th {
  font-weight:bold;
  background-color:#f2f2f2;
}

5. Ringkasan

Mengalih keluar sempadan daripada jadual CSS ialah kemahiran yang sangat asas dalam pembangunan bahagian hadapan Menguasai kemahiran ini dengan berkesan boleh meningkatkan keindahan jadual. Selepas kita menguasai teknik ini, kita juga boleh membuat pelarasan gaya lain mengikut keperluan sebenar. Saya harap artikel ini akan membantu semua orang, supaya anda boleh menggunakan teknik mengalih keluar sempadan daripada jadual CSS dengan lebih baik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara mengalih keluar sempadan daripada jadual CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!