Bagaimana untuk Semat Lajur Pertama dalam Jadual Bootstrap 3 Responsif?

Menyematkan Lajur Pertama dalam Jadual Responsif Bootstrap 3

Meningkatkan responsif jadual adalah penting untuk reka bentuk web mudah alih, terutamanya apabila skrin terhad hartanah menjadikannya perlu untuk mengutamakan kandungan tertentu. Dalam senario sedemikian, adalah wajar untuk memastikan bahawa lajur pertama jadual kekal tetap, menyediakan akses mudah kepada maklumat penting.

Satu penyelesaian berkesan untuk mencapai matlamat ini ialah memanfaatkan JavaScript dan CSS. Dengan mencipta klon lajur pertama dan menggunakan kedudukan mutlak, kami boleh membenarkan baki jadual untuk menatal secara mendatar sementara lajur klon kekal diletakkan. Teknik ini memastikan bahawa lajur awal, selalunya mengandungi maklumat penting seperti pengepala jadual, kekal kelihatan tanpa mengira menatal.

Pelaksanaan jQuery

Enkapsulasi kod JavaScript dalam $( function(){...}) blok, memastikan pelaksanaan yang betul semasa memuatkan DOM. Buat klon jQuery bagi jadual sedia ada, masukkannya sebelum jadual asal dan tetapkan kelas tersuai 'lajur tetap' untuk membezakannya.

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

Laraskan ketinggian baris lajur yang diklonkan kepada padankan dengan jadual asal.

<code class="javascript">$fixedColumn.find('tr').each(function(i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
});</code>

Penggayaan CSS

Tentukan penggayaan CSS untuk meletakkan lajur yang diklon secara mutlak, menetapkan lebarnya dan menggunakan sempadan dan latar belakang yang sesuai warna. Gunakan pertanyaan media untuk menyembunyikan lajur yang diklon untuk saiz port pandangan melebihi 768px, memastikan paparan optimum pada skrin besar.

<code class="css">.table-responsive > .fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}  </code>

<code class="css">@media(min-width:768px) {
    .table-responsive > .fixed-column {
        display: none;
    }
}</code>

Aplikasi Dunia Sebenar

Aplikasi tunjuk cara yang disertakan di bawah mempamerkan teknik ini dalam tindakan, membetulkan lajur pertama dengan berkesan walaupun semasa menatal baki jadual secara mendatar pada peranti mudah alih.

Kesimpulan

Gabungan jQuery dan CSS membolehkan penyematan lajur pertama dalam jadual responsif Bootstrap 3, memastikan kandungan penting kekal kelihatan tanpa mengira orientasi peranti. Dengan mengklon yang pertama

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