Penjelasan terperinci tentang cara mengalih keluar sempadan daripada jadual CSS

PHPz
Lepaskan: 2023-04-21 13:45:19
asal
2914 orang telah melayarinya

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>
Salin selepas log masuk

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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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%;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan