Lebar tetapan jadual CSS

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mereka bentuk halaman web, yang boleh menjadikan reka letak halaman web lebih cantik dan mesra pengguna.

Dalam pembangunan tapak web, jadual ialah elemen penanda yang kerap digunakan, yang boleh digunakan untuk memaparkan senarai, data statistik, dsb. Apabila menggunakan jadual, biasanya perlu menetapkan lebar jadual untuk memastikan kesan paparan jadual pada halaman.

Lebar lalai jadual adalah adaptif mengikut kandungan dalam jadual, yang selalunya bukan hasil yang kita inginkan. Oleh itu, lebar jadual boleh dikawal dengan tepat menggunakan CSS.

Kaedah untuk menetapkan lebar jadual dalam CSS:

1 Gunakan peratusan

Dalam CSS, kita boleh menggunakan peratusan untuk menentukan lebar jadual. Sebagai contoh, jika kita ingin menetapkan lebar jadual kepada 50%, kita boleh menggunakan kod berikut:

jadual {

width: 50%;

}

Dengan cara ini, lebar jadual akan menduduki skrin 50% daripada lebar.

Kelebihan menggunakan peratusan untuk menetapkan lebar jadual ialah ia boleh disesuaikan berdasarkan elemen induk, yang bermaksud bahawa jika lebar halaman berubah, lebar jadual juga akan berubah untuk menyesuaikan diri dengan susun atur baru.

2. Gunakan piksel

Selain peratusan, kita juga boleh menggunakan piksel (px) sebagai unit untuk menetapkan lebar jadual. Dalam CSS, kod untuk menetapkan lebar jadual menggunakan piksel adalah seperti berikut:

jadual {

width: 400px;

}

Dengan cara ini, lebar jadual akan ditetapkan pada 400 piksel.

Tidak seperti peratusan, kelemahan menggunakan piksel untuk menetapkan lebar jadual ialah lebar jadual tidak akan menyesuaikan diri apabila reka letak halaman berubah. Iaitu, jika kita melihat halaman web pada peranti yang berbeza, lebar jadual mungkin melebihi lebar skrin, mengakibatkan pengalaman pengguna yang buruk.

3. Lebar jadual penyesuaian

Selain daripada dua kaedah di atas, kami juga boleh menggunakan lebar jadual penyesuaian untuk melaraskan lebar jadual secara automatik apabila kandungan berubah.

Untuk pelaksanaan khusus, kita boleh menetapkan elemen induk jadual kepada lebar tetap, dan kemudian tetapkan lebar jadual kepada 100%, supaya jadual akan menyesuaikan lebarnya mengikut elemen induk. Kodnya adalah seperti berikut:

.bekas {

width: 600px;

}

jadual {

width: 100%;

}

Dalam contoh di atas, jadual Lebar elemen induk .bekas ditetapkan kepada 600 piksel dan lebar jadual ditetapkan kepada 100%, supaya jadual akan menyesuaikan diri dengan lebar elemen induk dan membalut secara automatik apabila terdapat terlalu banyak kandungan .

Ringkasan

Apabila menggunakan jadual, kita boleh menetapkan lebar jadual melalui CSS supaya jadual boleh dipaparkan secara normal pada peranti dan reka letak halaman yang berbeza. Selain peratusan dan piksel, anda juga boleh menggunakan lebar jadual penyesuaian untuk menyesuaikan diri dengan panjang kandungan dan lebar peranti yang berbeza.

Atas ialah kandungan terperinci Lebar tetapan jadual CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!