Tafsiran sifat susun atur jadual CSS: jadual dan paparan

Tafsiran atribut susun atur jadual CSS: jadual dan paparan

Dalam pembangunan bahagian hadapan, reka letak jadual ialah kaedah reka letak yang biasa digunakan. CSS menyediakan beberapa sifat susun atur jadual, yang paling biasa digunakan ialah sifat jadual dan paparan. Kedua-dua sifat ini akan diterangkan secara terperinci di bawah dan contoh kod khusus akan diberikan.

1. Atribut jadual

jadual ialah atribut yang digunakan dalam CSS untuk menetapkan elemen pada reka letak jadual. Dengan menetapkan atribut paparan elemen kepada jadual, susun atur elemen boleh ditukar kepada susun atur jadual. Atribut jadual boleh digunakan pada mana-mana elemen peringkat blok, termasuk div, ul, bahagian, dsb. Berikut ialah contoh:

Kod HTML:

<div class="table-layout">这是一段表格布局的内容</div>

Kod CSS:

.table-layout {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

Kod di atas menukar susun atur elemen kepada susun atur jadual, dan menetapkan lebar kepada 100% dan sempadan untuk bergabung menjadi satu jidar.

Beberapa atribut berkaitan yang biasa digunakan bagi atribut jadual juga termasuk:

• susun atur jadual: Tetapkan algoritma reka letak jadual Nilai pilihan adalah automatik dan tetap. auto bermakna bahawa jadual secara automatik memperuntukkan lebar lajur berdasarkan kandungan, dan tetap bermakna bahawa lebar lajur jadual adalah tetap. Nilai lalai ialah auto.
• sempadan-runtuh: Tetapkan kaedah penggabungan sempadan jadual Nilai pilihan adalah runtuh dan berasingan. Runtuh bermakna jidar jadual digabungkan menjadi satu jidar, dan berasingan bermakna jidar jadual dipisahkan kepada jidar yang berasingan. Nilai lalai adalah berasingan.

2. Atribut paparan

Atribut paparan ialah atribut yang sangat penting dalam CSS. Dengan menetapkan atribut paparan kepada sel jadual, susun atur elemen boleh ditukar kepada susun atur sel jadual. Atribut paparan boleh digunakan pada mana-mana elemen peringkat blok. Berikut ialah contoh:

Kod HTML:

<div class="table-cell-layout">这是一个表格单元格布局的内容</div>

Kod CSS:

.table-cell-layout {
  display: table-cell;
  width: 50%;
  border: 1px solid black;
}

Kod di atas menukar susun atur elemen kepada susun atur sel jadual dan menetapkan lebar kepada 50% dan sempadan hitam.

Beberapa atribut berkaitan yang biasa digunakan bagi atribut paparan termasuk:

• paparan: table-row: Tukar reka letak elemen kepada susun atur baris jadual.
• paparan: table-row-group: Tukar reka letak elemen kepada susun atur kumpulan baris jadual, digunakan untuk membalut baris jadual.
• paparan: table-header-group: Tukar susun atur elemen kepada susun atur pengepala jadual, digunakan untuk membalut pengepala jadual.
• paparan: table-footer-group: Tukar reka letak elemen kepada reka letak bawah jadual, digunakan untuk membalut bahagian bawah meja.
• paparan: kapsyen jadual: Tukar reka letak elemen kepada reka letak tajuk jadual.
• paparan: jadual sebaris: Tukar reka letak elemen kepada susun atur jadual sebaris.

Ringkasan:
Melalui atribut jadual dan paparan, kami boleh melaksanakan reka letak jadual dengan mudah. Atribut jadual digunakan pada reka letak keseluruhan jadual, manakala atribut paparan digunakan pada susun atur sel atau baris individu dalam jadual. Dengan menetapkan sifat ini, kita boleh mengawal gaya dan susun atur jadual dengan mudah. Dalam pembangunan sebenar, atribut yang sesuai boleh dipilih mengikut keperluan khusus untuk mereka bentuk susun atur jadual.

Atas ialah kandungan terperinci Tafsiran sifat susun atur jadual CSS: jadual dan paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!