Bagaimana untuk menetapkan lebar jadual dalam css

Dalam reka bentuk dan pembangunan web, penggunaan jadual adalah sangat biasa. Menetapkan lebar meja juga merupakan salah satu kemahiran yang mesti dikuasai. Terdapat beberapa cara untuk menetapkan lebar jadual dalam CSS. Artikel ini akan memperkenalkan kaedah ini dan senario aplikasinya secara terperinci.

1. Tetapkan lebar jadual kepada nilai tetap
   Menetapkan lebar jadual kepada nilai tetap ialah kaedah yang paling mudah dan kasar. Dalam CSS, anda boleh melakukan ini dengan menetapkan sifat "lebar" jadual. Kelebihan kaedah ini ialah ia mudah dan mudah difahami, serta mempunyai keserasian yang sangat baik dan disokong oleh hampir semua pelayar. Walau bagaimanapun, kaedah ini mempunyai kelemahan, iaitu, jika terdapat terlalu banyak kandungan dalam jadual, lebar jadual tidak akan mencukupi.

Sebagai contoh, kod berikut boleh menetapkan lebar jadual kepada 100 piksel:

table {
  width: 100px;
}

2. Tetapkan lebar jadual sebagai peratusan
   Cara lain untuk menetapkan lebar jadual Kaedahnya adalah dengan menggunakan peratusan. Nilai lebar yang ditetapkan dengan cara ini ditentukan secara relatif kepada lebar bekas induk yang mengandungi. Sebagai contoh, jika anda menetapkan lebar jadual kepada 100%, ia akan sama dengan lebar bekas induk.

Berbanding dengan menetapkan lebar tetap, menggunakan peratusan membolehkan jadual menyesuaikan secara automatik kepada peranti dengan saiz yang berbeza. Kelemahannya ialah reka letak jadual mungkin berubah pada peranti yang berbeza kerana peratusan adalah relatif, bukan mutlak.

Sebagai contoh, kod berikut boleh menetapkan lebar jadual kepada 100%:

table {
  width: 100%;
}

3. Tetapkan mod susun atur jadual
   Seperti yang dinyatakan di atas, gunakan peratusan tetapan mod Jadual mungkin berubah pada peranti yang berbeza. Susun atur meja boleh menyelesaikan masalah ini. Dalam CSS, terdapat dua kaedah susun atur untuk dipilih: susun atur tetap dan susun atur automatik.

Susun atur tetap bermakna apabila atribut "susun atur jadual" jadual ditetapkan kepada "tetap", penyemak imbas akan mengira sel berdasarkan jumlah lebar semua lajur dalam jadual lebar. Setelah lebar sel ditentukan, jadual akan menggunakan lebar ini untuk melukis semua sel. Kaedah ini boleh mengelakkan masalah kelebaran jadual yang tidak mencukupi, tetapi jika terdapat sel yang panjang dalam jadual atau terlalu banyak kandungan teks dalam sel, sel mungkin berubah bentuk.

Berikut ialah kod untuk susun atur tetap:

table {
  table-layout: fixed;
}

Susun atur automatik (susun atur automatik) bermakna apabila lebar lajur tidak ditetapkan dalam jadual, penyemak imbas akan mengira unit secara dinamik berdasarkan kandungan dalam lajur Lebar grid. Dalam erti kata lain, apabila kandungan dalam sel melebihi lebar sel, jadual akan mengembangkan lebar secara automatik. Kaedah susun atur ini sesuai untuk situasi di mana kandungan teks dalam jadual panjang atau kandungan dalam sel kerap berubah, tetapi masalah lebar tidak mencukupi sering berlaku.

Berikut ialah kod untuk reka letak automatik:

table {
  table-layout: auto;
}

4. Menggunakan ciri baharu CSS3
   Dalam CSS3, terdapat atribut baharu yang dipanggil "min-width". Sifat ini boleh menetapkan lebar minimum jadual Apabila kandungan dalam jadual melebihi lebar minimum, jadual akan mengembangkan lebar secara automatik.

Berikut ialah kod menggunakan atribut "min-width":

table {
  min-width: 200px;
}

Ringkasan
Di atas ialah beberapa kaedah menetapkan lebar jadual. Kebiasaannya, kita perlu memutuskan kaedah mana yang hendak digunakan berdasarkan situasi sebenar. Jika anda memerlukan jadual untuk menyesuaikan diri dengan saiz peranti, menggunakan lebar peratusan mungkin merupakan pilihan yang baik jika anda perlu mengelakkan lebar meja yang tidak mencukupi, anda boleh menggunakan susun atur tetap. Sudah tentu, mengikut senario penggunaan yang berbeza, kami juga boleh menggunakan kaedah ini secara menyeluruh untuk memenuhi keperluan.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar jadual dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!