Bagaimana untuk Membetulkan Lajur Pertama dalam Jadual Bootstrap Responsif?

Membetulkan Lajur Pertama dalam Jadual Bootstrap Responsif

Jadual Bootstrap Responsif ialah cara yang mudah untuk memaparkan data pada peranti mudah alih. Walau bagaimanapun, memastikan lajur pertama kekal tetap (bukan menatal) boleh menjadi satu cabaran. Berikut ialah penyelesaian yang berkesan untuk ini:

Kaedah:

Untuk membetulkan lajur pertama, kita boleh mengklonkannya dan meletakkannya di hadapan jadual asal menggunakan kedudukan CSS: mutlak. Dengan cara ini, lajur yang diklonkan akan kekal pada tempatnya manakala selebihnya jadual menatal.

Langkah 1: Kod jQuery

Gunakan jQuery untuk mengklonkan jadual dan mencipta lajur tetap:

$(function() {
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
});

Langkah 2: Penggayaan CSS

Tentukan peraturan CSS untuk lajur tetap:

.table-responsive>.fixed-column {
    position: absolute;
}

Untuk melaraskan penampilan dan tingkah laku lajur tetap, anda boleh menambah sifat CSS tambahan seperti lebar, warna latar belakang dan jidar.

Pertimbangan Tambahan:

• Ini penyelesaian berfungsi paling baik untuk peranti mudah alih di mana penatalan mendatar dijangka.
• Untuk peranti dengan skrin yang lebih luas, anda mungkin mahu menyembunyikan lajur tetap untuk mengelakkan kekacauan yang tidak perlu.
• Laraskan nilai lebar min dalam pertanyaan media untuk memadankan titik putus tempat lajur tetap harus disembunyikan.

Demo:

[Pautan ke demo yang berfungsi di sini]

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