Bagaimana untuk Membekukan Lajur Jadual Pertama untuk Kebolehgunaan Mudah Alih Dipertingkat dalam Bootstrap 3?

Bootstrap 3: Mencipta Jadual Responsif dengan Lajur Pertama Tetap untuk Kebolehgunaan Mudah Alih Dipertingkat

Peranti mudah alih memberikan cabaran unik apabila memaparkan data kompleks dalam meja. Untuk menjadikan jadual responsif pada peranti ini, Bootstrap menawarkan kelas "responsif jadual". Walau bagaimanapun, anda mungkin mendapati adalah wajar untuk memastikan bahawa lajur pertama, selalunya mengandungi pengepala jadual, kekal tetap dan kelihatan walaupun pengguna menatal secara mendatar.

Satu pendekatan untuk mencapai ini adalah melalui gabungan jQuery dan CSS:

Kod jQuery

$(function(){
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq(' + i + ')').height());
    });
});

Kod CSS

.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

Penjelasan

1. Kod jQuery mengklonkan jadual asal dan memasukkannya sebelum jadual, memberikannya kelas "lajur tetap."
2. Kod itu kemudian mengalih keluar semua lajur kecuali yang pertama daripada jadual klon .
3. Ia melaraskan ketinggian baris dalam jadual klon agar sepadan dengan jadual asal.
4. Kod CSS meletakkan jadual klon secara mutlak dengan lebar dan jidar tetap, mengekalkannya di tempat semasa jadual asal menatal secara mendatar.

Pendekatan ini memastikan bahawa lajur pertama jadual kekal pada peranti mudah alih, meningkatkan kebolehgunaan dan navigasi, terutamanya untuk jadual dengan banyak lajur.

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