Susun atur jadual - Trik CSS | CSS Almanac 2025

Yang table-layoutmentakrifkan harta apa algoritma perisiannya patut gunakan untuk meletakkan baris jadual, sel-sel, dan lajur.

table ( table-layout: fixed; )

Seperti yang dijelaskan dalam spesifikasi CSS2.1, susun atur meja secara umum biasanya merupakan masalah selera dan akan berbeza bergantung pada pilihan reka bentuk. Namun, penyemak imbas akan secara automatik menerapkan batasan tertentu yang akan menentukan bagaimana jadual disusun. Ini berlaku apabila table-layoutharta itu ditetapkan ke auto(lalai). Tetapi kekangan ini dapat diangkat ketika table-layoutditetapkan fixed.

Nilai

auto: lalai. Algoritma automatik penyemak imbas digunakan untuk menentukan bagaimana susunan baris, sel, dan lajur jadual. Susun atur jadual yang dihasilkan umumnya bergantung pada kandungan jadual.
fixed: Dengan nilai ini, susun atur jadual mengabaikan kandungan dan sebaliknya menggunakan lebar meja, lebar lajur yang ditentukan, dan nilai jarak sempadan dan sel. Nilai lajur yang digunakan didasarkan pada lebar yang ditentukan pada lajur atau sel untuk baris pertama jadual.
inherit: menunjukkan bahawa nilai tersebut diwarisi dari table-layoutnilai induknya

Agar nilai fixedmempunyai kesan, lebar meja harus ditetapkan ke sesuatu selain auto(lalai untuk widthharta tanah). Dalam demo di bawah, semua lebar jadual ditetapkan ke 100%, yang menganggap kita mahu jadual mengisi bekas induknya secara mendatar.

Kaedah terbaik untuk melihat kesan algoritma susun atur jadual tetap adalah menggunakan demo.

Lihat Pen Demo untuk susun atur jadual CSS oleh Louis Lazaris (@impressivewebs) di CodePen.

Semasa pertama kali melihat demo di atas, anda akan melihat susun atur lajur jadual tidak seimbang dan janggal. Pada ketika itu, tabel menggunakan algoritma lalai penyemak imbas untuk menentukan cara meletakkan jadual, yang bermaksud kandungan akan menentukan tata letak. Demo ini membesar-besarkan fakta ini dengan memasukkan rentetan teks yang panjang di dalam satu sel jadual, sementara semua sel jadual yang lain hanya menggunakan dua perkataan. Seperti yang anda lihat, penyemak imbas memperluas lajur pertama untuk menampung kandungan yang lebih besar.

Sekiranya anda mengklik butang "Toggle table-layout: fixed", anda akan melihat seperti apa susun atur jadual ketika algoritma "tetap" digunakan. Apabila table-layout: fixedditerapkan, konten tidak lagi menentukan tata letak, tetapi sebaliknya, penyemak imbas menggunakan lebar yang ditentukan dari baris pertama jadual untuk menentukan lebar lajur. Sekiranya tidak ada lebar pada baris pertama, lebar lajur dibahagikan sama rata di seluruh jadual, tanpa mengira kandungan di dalam sel.

Contoh lebih lanjut dapat membantu menjadikannya lebih jelas. Dalam demo berikut, jadual mempunyai elemen yang elemen pertama mempunyai lebar 400px. Perhatikan dalam kes ini, togol table-layout: fixedtidak memberi kesan.

Lihat Pen Demo untuk susun atur jadual CSS oleh Louis Lazaris (@impressivewebs) di CodePen.

Ini berlaku kerana algoritma susun atur pada dasarnya mengatakan "buat lajur pertama seluas 400 piksel, dan sebarkan lajur selebihnya berdasarkan kandungannya". Oleh kerana tiga lajur lain mempunyai kandungan yang sama antara satu sama lain, tidak akan ada perubahan. Tetapi sekarang mari kita tambahkan beberapa kandungan teks tambahan ke salah satu lajur lain:

Lihat Pen Demo untuk susun atur jadual CSS dengan lebar kol dan kandungan berubah oleh Louis Lazaris (@impressivewebs) di CodePen.

Sekarang jika anda mengklik butang beralih, anda akan melihat lajur disesuaikan untuk menampung susun atur tetap, tanpa mengira kandungannya. Sekali lagi, perkara yang sama berlaku; lajur pertama ditetapkan pada 400px maka lajur selebihnya dibahagi sama rata. Tetapi kali ini, kerana salah satu lajur mempunyai kandungan tambahan, perbezaannya dapat dilihat.

Bagaimana algoritma susun atur tetap menentukan lebar lajur

Dua demo berikut harus membantu dalam memahami bahawa baris pertama jadual adalah yang membantu menentukan lebar lajur yang ditetapkan table-layout: fixed.

Lihat Pen Demo untuk susun atur jadual CSS dengan sel di baris 1 diberi lebar yang ditentukan oleh Louis Lazaris (@impressivewebs) di CodePen.

Dalam demo di atas, sel pertama di baris pertama jadual mempunyai lebar 350 piksel. Toggling table-layout: fixedmenyesuaikan lajur lain, tetapi yang pertama tetap sama. Sekarang cuba demo berikut:

Lihat Pen Demo untuk susun atur jadual CSS dengan sel di baris 2 diberi lebar yang ditentukan oleh Louis Lazaris (@impressivewebs) di CodePen.

Dalam kes ini, ini adalah baris kedua yang mempunyai lebar yang melekat pada sel meja pertama. Sekarang apabila butang togol diklik, semua lebar lajur disesuaikan. Sekali lagi, ini kerana algoritma susun atur tetap menggunakan baris pertama untuk menentukan lebar lajur, dan hasil akhirnya adalah bahawa ia mengagihkan lebar secara sama rata.

Faedah algoritma susun atur tetap

Manfaat estetika penggunaan table-layout: fixedharus jelas dari demonstrasi di atas. Tetapi faedah utama yang lain adalah prestasi. Spesifikasi merujuk kepada algoritma tetap sebagai algoritma "cepat", dan untuk alasan yang baik. Penyemak imbas tidak perlu menganalisis keseluruhan isi jadual sebelum menentukan ukuran lajur; ia hanya perlu menganalisis baris pertama. Jadi hasilnya adalah pemprosesan susun atur jadual yang lebih pantas.