web-dev-qa-db-ja.com

bootstrap 3最初の列が固定されたレスポンシブテーブル

私は特にモバイルをターゲットにしているため、Bootstrapレスポンシブテーブルがあります。 bootstrapクラスが「table-responsive」であり、クラスが「table table-striped table-bordered table-hover table-condensed」クラスでネストされた単なるdivです。

最初の列を固定する（水平にスクロールしない）ことを確認する簡単な方法はありますか？モバイルデバイスでは、毎回スクロールする可能性がありますが、最初の列には基本的にテーブルヘッダーが含まれています。

csstwitter-bootstraphtml-tableresponsive-design
19
CGross

モバイルデバイスのみをターゲットにしている場合は、これが有効な場合があります。テーブルの最初の列のクローンを作成し、position:absoluteしたがって、テーブルの残りの部分をスクロールすると「前」に表示されます。

これには、いくつかの基本的なjqueryコードとカスタムCSSクラスが必要です。

jQuery

$(function(){
    var $table = $('.table');
    //Make a clone of our table
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

    //Remove everything except for first column
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    //Match the height of the rows to that of the original table's
    $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; /* bootstrap v3 fix for fixed column background color*/
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

このアプローチのワーキングデモ

41
koala_dev