Sifat jadual CSS: susun atur jadual, runtuhan sempadan dan bahagian kapsyen

Sifat jadual CSS: susun atur jadual, runtuh sempadan dan sisi kapsyen, contoh kod khusus diperlukan

Dalam reka bentuk web, jadual ialah elemen biasa yang boleh digunakan untuk memaparkan data, mencipta reka letak dan Mencapai pelbagai daripada kesan. Untuk mengawal gaya dan reka letak jadual, CSS menyediakan satu siri sifat jadual, termasuk susun atur jadual, runtuhan sempadan dan sisi kapsyen. Artikel ini menerangkan ketiga-tiga sifat ini secara terperinci dan menyediakan contoh kod khusus.

1. Atribut susun atur jadual

atribut susun atur jadual digunakan untuk menentukan algoritma reka letak jadual. Nilai yang biasa digunakan ialah "auto" dan "tetap".

1. auto (lalai): Laraskan lebar lajur secara automatik berdasarkan kandungan sel.
2. dibetulkan: Semua lajur menggunakan reka letak lebar yang sama. Anda boleh mengawal lebar setiap lajur dengan menetapkan lebar lajur atau peratusan.

Contoh kod:

table {
  table-layout: fixed;
  width: 100%; /* 表格占满容器宽度 */
}

td {
  width: 25%; /* 每列宽度为容器的四分之一 */
}

2. Atribut runtuhan sempadan

Atribut runtuhan sempadan digunakan untuk menentukan kaedah penggabungan sempadan jadual. Nilai yang biasa digunakan ialah "runtuh" ​​dan "terpisah".

1. runtuh: Sempadan sel bersebelahan digabungkan menjadi satu sempadan.
2. asing (lalai): Sempadan sel bersebelahan kekal bebas.

Contoh kod:

table {
  border-collapse: collapse; /* 边框合并 */
}

td {
  border: 1px solid black; /* 单元格边框 */
}

3. Atribut sisi kapsyen

Atribut sisi kapsyen digunakan untuk menentukan kedudukan tajuk jadual. Nilai yang biasa digunakan ialah "atas" dan "bawah".

1. atas: Tajuk jadual berada di bahagian atas.
2. bawah: Tajuk jadual adalah di bawah (lalai).

Contoh kod:

caption {
  caption-side: top; /* 表格标题位于上方 */
}

Ringkasnya, sifat susun atur jadual, keruntuhan sempadan dan sisi kapsyen CSS memainkan peranan penting dalam mengawal gaya dan reka letak jadual. Dengan menetapkan nilai sifat ini, kami boleh melaraskan lebar, gaya sempadan dan kedudukan tajuk jadual secara fleksibel untuk memenuhi keperluan reka bentuk yang berbeza.

Semoga contoh kod yang disediakan dalam artikel ini akan membantu anda apabila menggunakan sifat ini. Jika anda memerlukan maklumat lanjut tentang sifat jadual CSS, lihat dokumentasi atau tutorial.

Atas ialah kandungan terperinci Sifat jadual CSS: susun atur jadual, runtuhan sempadan dan bahagian kapsyen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!