bootstrap 3：モバイルユーザビリティを強化するための固定された最初の列を使用して応答性のあるテーブルを作成するテーブル。これらのデバイスでテーブルを応答するために、Bootstrapは「テーブル対応」クラスを提供します。ただし、多くの場合、テーブルヘッダーを含む最初の列が、ユーザーが水平方向にスクロールしている場合でも固定されており、目に見えるようにすることが望ましい場合があります。

jquery code

$（function（）{{ var $ table = $（ '。テーブル'）; var $ fixedcolumn = $ table.clone（）。insertbefore（$ table）.addclass（ 'sixed-column'）; $ fixedcolumn.find（ 'th：not（：first-child）、td：not（：first-child）'）。remaid（）; $ fixedcolumn.find（ 'tr'）。各（function（i、elem）{ $（this）.height（$ table.find（ 'tr：eq（' i '）'）。height（））; }）; }）;

css code

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

。 位置：絶対; ディスプレイ：インラインブロック。 幅：auto; 国境右：1PX SOLID #DDD; バックグラウンドカラー：#fff; } @media（min-width：768px）{ .table-responsive> .fixed-column { 表示：なし; } }

説明

$(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コードは元のテーブルをクローンし、テーブルの前に挿入し、クラス「固定列」を与えます。 次に、クローンテーブルから最初の列を除くすべての列を削除します。クローンテーブルを固定幅と境界線で絶対に配置し、元のテーブルが水平にスクロールしている間に所定の位置に保ちます。特に多数の列があるテーブルのナビゲーション。