الطاولات. لجعل الجداول تستجيب على هذه الأجهزة ، يقدم Bootstrap فئة "الجدول المستجيبة". ومع ذلك ، قد تجد أنه من المرغوب فيه التأكد من أن العمود الأول ، الذي يحتوي على رؤوس الجدول غالبًا ، يظل ثابتًا ومرئيًا حتى عندما يقوم المستخدم بتمرير أفقيًا.

رمز jQuery

var $ table = $ ('. table') ؛ var $ fixedColumn = $ table.clone (). insertbefore ($ table) .addClass ('flex column') ؛ $ fixedcolumn.find ('th: not (: first-child) ، td: not (: first-child)'). remove () ؛ $ fixedcolumn.find ('tr'). كل (وظيفة (i ، elem) { $ (this). height ($ table.find ('tr: eq (' i ')'). height ()) ؛ }) ؛ }) ؛

رمز CSS الموقف: مطلق ؛ العرض: كتلة مضمنة. العرض: السيارات ؛ اليمين الحدودي: 1 بكسل Solid #DDD ؛ خلفية اللون: #fff ؛ } media (min-width: 768px) { .Table-consponsive>. العرض: لا شيء ؛ } }

$(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());
    });
});

التفسير

يستنسخ رمز 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());
    });
});

ثم يزيل جميع الأعمدة باستثناء أول واحد من الجدول المستنسخ. يضع الجدول المستنسخ تمامًا بعرض وحدود ثابتة ، مما يحتفظ به في مكانه بينما يقوم الجدول الأصلي بالتمرير أفقيًا.

والملاحة ، خاصة بالنسبة للجداول ذات الأعمدة العديدة.