Bagaimana untuk Melabuhkan Lajur Pertama dalam Bootstrap 3 Jadual Responsif untuk Pengoptimuman Mudah Alih?

Memastikan Lajur Pertama Tetap dalam Bootstrap 3 Jadual Responsif

Dalam reka bentuk web responsif, adalah penting untuk memastikan jadual menyesuaikan dengan lancar ke skrin yang berbeza saiz. Bootstrap 3 menawarkan penyelesaian yang mantap dengan kelas "table-responsive" untuk jadual responsif. Walau bagaimanapun, kadangkala adalah wajar untuk menambat lajur pertama jadual apabila menatal secara mendatar, terutamanya pada peranti mudah alih yang ruang terhad.

Penyelesaian: Pengklonan dan Kedudukan

Kepada mencapai lajur pertama yang tetap, kita boleh mengklonkannya dan menggunakan kedudukan mutlak menggunakan jQuery dan CSS. Inilah metodologinya:

1. Mencipta Klon: Klonkan jadual asal dan masukkannya sebelum yang asal. Gunakan kelas CSS "lajur tetap" pada klon untuk membezakannya.
2. Mengalih Keluar Elemen Yang Tidak Diperlukan: Alih keluar semua pengepala jadual (th) dan data jadual (td) kecuali yang ada dalam lajur pertama daripada jadual klon.
3. Ketinggian Baris Padan: Pastikan ketinggian baris jadual klon sepadan dengan jadual asal untuk penampilan yang konsisten.
4. Penggayaan CSS: Gunakan kelas CSS "lajur tetap" pada jadual klon. Tetapkan kedudukannya kepada mutlak, paparkan blok sebaris, tentukan lebarnya, tentukan sifat sempadan dan berikan warna latar belakang tersuai (jika perlu).
5. Pertanyaan Media: Sembunyikan jadual klon pada saiz skrin yang lebih besar menggunakan pertanyaan media, seperti @media(min-width:768px).

Dengan mengikuti langkah ini, anda boleh membuat jadual responsif Bootstrap 3 yang menarik secara visual dengan mudah dengan tetapan lajur pertama, memastikan maklumat penting kekal kelihatan walaupun semasa menatal secara mendatar.

Atas ialah kandungan terperinci Bagaimana untuk Melabuhkan Lajur Pertama dalam Bootstrap 3 Jadual Responsif untuk Pengoptimuman Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!