33

この投稿の @koala_dev のコードに従って、テーブルが水平方向にスクロールする最初の列をロックしようとしました。残念ながら、コードは私のテーブルには影響しません。私はプログラミングに慣れていないので、誰かが私が間違ったことを教えてくれるかどうか疑問に思っていました.

これは私のテーブルです: http://jsfiddle.net/mademoiselletse/bypbqboe/59/

これは、JS に挿入したコードです (121 ～ 133 行目)。

$(function() {
    var $tableClass = $('.table');
    // Make a clone of our table
    var $fixedColumn = $tableClass.clone().insertBefore($tableClass).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($tableClass.find('tr:eq(' + i + ')').height());
    });
});

これは、挿入した CSS プロパティ (36 ～ 47 行目) です。

.table-responsive > .fixed-column {
   position: absolute;
   display: inline-block;
   width: auto;
   border-right: 1px solid #ddd;
}

@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

デモ コードから逸脱した唯一のことは、以前に として定義したので、代わりに$('.table')として定義したことです。あなたの助けは大歓迎です!$tableClass$tablevar $table$('#table')

4

4 に答える 4

42

わかりました..すべてのjsコードを削除すると、以下のようにいくつかの CSS トリックを使用してこれを行うことができます。

デモ

CSS

.table > thead:first-child > tr:first-child > th:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > tbody > tr > td:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > thead:first-child > tr:first-child > th:nth-child(2) {
    padding-left: 40px;
}

.table > tbody > tr > td:nth-child(2) {
    padding-left: 50px !important;
}
于 2015-05-26T05:55:19.633 に答える
2

$('#table')id による発見要素を意味しますtable。

$('.table')は、クラスごとに要素を見つけることを意味しますtable。

これらは、css で使用した CSS セレクターです。

あなたの場合、テーブルには idtableがあったので、 を使用してそのテーブルを選択できます$('#table')。

また、 class を使用する html 要素がないtableため、 を使用して選択しても何も得られません$('.table')。

于 2015-05-26T03:46:21.860 に答える