Bootstrap 3 でモバイルの使いやすさを向上させるためにテーブルの最初の列を固定するにはどうすればよいですか?

ブートストラップ 3: モバイルのユーザビリティを向上させるために、最初の列が固定されたレスポンシブ テーブルの作成

モバイル デバイスでは、複雑なデータを表示するときに特有の課題が発生します。テーブル。これらのデバイス上でテーブルを応答できるようにするために、Bootstrap は「テーブル応答」クラスを提供します。ただし、最初の列 (多くの場合テーブル ヘッダーが含まれる) は、ユーザーが水平方向にスクロールしても固定され、表示されたままであることが望ましい場合があります。

これを実現する 1 つのアプローチは、jQuery と CSS を組み合わせることです。

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

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;
    }
}

説明

1. jQuery コードは元のテーブルを複製し、テーブルの前に挿入してクラス「fixed-column」を与えます。
2. 次に、複製されたテーブルから最初の列を除くすべての列を削除します。 .
3. 元のテーブルと一致するようにクローン テーブルの行の高さを調整します。
4. CSS コードは、クローン テーブルを固定幅と境界線で絶対的に配置し、固定されている間、クローン テーブルを所定の位置に保ちます。元のテーブルは水平にスクロールします。

このアプローチにより、テーブルの最初の列がモバイル デバイス上で固定されたままになり、特に多数の列を持つテーブルの使いやすさとナビゲーションが向上します。

以上がBootstrap 3 でモバイルの使いやすさを向上させるためにテーブルの最初の列を固定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。