Bagaimanakah Saya Boleh Mencipta Jadual dengan Lajur Tetap dan Lebar Berubah Menggunakan calc()?

Menggunakan calc() dengan Jadual: Lajur Tetap dan Lebar Boleh Ubah

Dalam percubaan untuk mencipta jadual dengan lebar tetap dan boleh ubah- lajur lebar menggunakan fungsi CSS calc(), anda mungkin menghadapi masalah dengan peratusan (%). Jadual mempunyai peraturan khusus untuk pengagihan ruang yang menjadikan calc() tidak serasi.

Penyelesaian Menggunakan susun atur jadual:

Untuk menyelesaikan masalah ini, tetapkan atribut susun atur jadual kepada tetap untuk meja. Ini memaksa elemen anak jadual (td) untuk mematuhi lebar yang ditentukan. Selain itu, tetapkan paparan jadual kepada jadual dan berikan lebar.

table{
   table-layout:fixed;
   width: 100%;
   display: table;
}

Lajur Berasaskan Peratusan:

Untuk lajur yang tinggal, gunakan peratusan biasa dan bukannya kalk (). Baki ruang selepas menampung lajur lebar tetap akan diagihkan secara berkadar antara lajur ini.

td.title, td.interpret{
    width:40%;
}
td.album{
    width:20%;
}

Nota:

Untuk menggunakan penyelesaian ini, paparan jadual mesti ditetapkan ke meja, yang menghalang anda daripada menetapkan ketinggian.

Diubah suai Contoh:

Berikut ialah versi ubah suai kod asal anda:

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Jadual dengan Lajur Tetap dan Lebar Berubah Menggunakan calc()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!