Mengapa \"text-align: center\" tidak berfungsi pada Colgroup dalam CSS?

Menggunakan "text-align: center" dengan CSS Colgroups: Panduan Penyelesaian Masalah

Satu cabaran biasa yang dihadapi semasa memformat jadual ialah menjajarkan teks secara mendatar . Walaupun sifat "penjajaran teks" boleh digunakan pada sel jadual secara individu, ia kadangkala kelihatan tidak mempunyai kesan apabila digunakan pada kumpulan kol. Berikut ialah penjelasan mengapa ini berlaku dan penyelesaian untuk mengatasinya.

Had CSS Colgroups

Walaupun tujuannya untuk mengumpulkan dan memformat lajur, kumpulan kol mempunyai had yang terhad set sifat CSS yang boleh digunakan. Malangnya, "text-align" bukan salah satu daripadanya. Ini bermakna walaupun anda menentukan "text-align: center" pada colgroup, ia tidak akan menjejaskan penjajaran teks dalam selnya.

Sebuah Penyelesaian Alternatif

Untuk mencapai teks berpusat dalam lajur dalam jadual, anda perlu menggunakan sifat "text-align: center" terus pada sel jadual itu sendiri. Walau bagaimanapun, ini menimbulkan masalah lain: lajur pertama dalam jadual masih tidak berpusat kerana kehadiran elemen "th" dijajar kiri.

Untuk menyelesaikannya, tambah peraturan CSS berikut:

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

Peraturan ini memusatkan semua sel jadual kecuali lajur pertama, yang kekal dijajar ke kiri, memastikan penjajaran yang betul di seluruh jadual.

HTML tidak sah

Perlu dinyatakan bahawa kod HTML anda tidak sah seperti yang diserlahkan oleh ketiadaan elemen "tr" dalam elemen "thead". Ini perlu diperbetulkan untuk memastikan struktur HTML dan sokongan penyemak imbas yang betul.

Atas ialah kandungan terperinci Mengapa \"text-align: center\" tidak berfungsi pada Colgroup dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!