10

Twitterブートストラップで作成した大きなスクロール可能なテーブルがありますが、最初の列がスクロールしないようにしたいと思います。これは可能ですか？

<div class="row">
    <div class="span12" style="height: auto !important;overflow-x: scroll;">';      
        <table class="table table-striped table-bordered table-condensed">
        <thead>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </thead>
        <tbody>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
       </tr>
       </tbody>
       </table>
    </div>
</div>
4

2 に答える 2

12

これが私の以前のコメントに基づいた可能な解決策のデモです：

デモ：ブートストラップテーブルの列を修正

これは実際にはテストされておらず、列を修正するための完全なソリューションではなく、構築するための概念実証であることに注意してください。

関連するマークアップは次のとおりです。この例では、ストライプ、ボーダー、凝縮されたBootstrapテーブルを使用しています

<div id="scroller">
    <table class="table table-striped table-bordered table-condensed">
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

そして必要なjQuery：

    $('#scroller table').each(function(){
    var table = $(this),
        fixedCol = table.clone(true),
        fixedWidth = table.find('th').eq(0).width(),
        tablePos = table.position();

    // Remove all but the first column from the cloned table
    fixedCol.find('th').not(':eq(0)').remove();
    fixedCol.find('tbody tr').each(function(){
        $(this).find('td').not(':eq(0)').remove();
    });

    // Set positioning so that cloned table overlays
    // first column of original table
    fixedCol.addClass('fixedCol');
    fixedCol.css({
        left: tablePos.left,
        top: tablePos.top
    });

    // Match column width with that of original table
    fixedCol.find('th,td').css('width',fixedWidth+'px');

    $('#scroller').append(fixedCol);
});​

および必要なCSS：

#scroller {
    width: 300px;
    overflow-x: scroll;
}
#scroller table {
    /* just a quick hack to make the table overflow the containing div
       your method may differ */
    width: 600px;
}

#scroller .table.fixedCol {
    width: auto;
    position: absolute;
    /* below styles are specific for borderd Bootstrap tables
       to remove rounded corners on cloned table */
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
       -moz-border-radius-topright: 0px;
       -moz-border-radius-bottomright: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
}
.table.fixedCol th,
.table.fixedCol td {
    /* background is set to white to hide underlaying column
       of original table */
    background: white;
}
于 2012-07-05T15:12:53.180 に答える
0

これは、この同じ問題に対する私の解決策のデモのフィドルです。必要な列を修正できます。テーブルに「fixed-columns」クラスを追加し、固定したいthとtdに「fixed-column」を追加するだけです。次に、responseTables.init（）を呼び出して残りを実行します。JSFイベントとの互換性を維持するために、元のテーブルのIDを変更することを選択しました。

HTMLは次のとおりです。

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover fixed-columns">
        <thead>
            <tr>
                <th class="fixed-column">#</th>
                ...
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="fixed-column">1</td>
                ...
            </tr>
            ...
        </tbody>
    </table>
</div>

これがJavascriptです：

    var responsiveTables = {
    init: function() {
        $(document).find('.fixed-columns').each(function (i, elem) {
            responsiveTables.fixColumns(elem);
        });     
    },

    fixColumns: function(table, columns) {
        var $table = $(table);
        $table.removeClass('fixed-columns');
        var $fixedColumns = $table.clone().attr('id', $table.attr('id') + '-fixed').insertBefore($table).addClass('fixed-columns-fixed');

    $fixedColumns.find('*').each(function (i, elem) {
        if ($(this).attr('id') !== undefined) {
                $table.find("[id='" + $(this).attr("id") + "']").attr('id', $(this).attr('id') + '-hidden');
            }
            if ($(this).attr('name') !== undefined) {
                $table.find("[name='" + $(this).attr("name") + "']").attr('name', $(this).attr('name') + '-hidden');
            }
        });

        if (columns !== undefined) {
            $fixedColumns.find('tr').each(function (x, elem) {
                $(elem).find('th,td').each(function (i, elem) {
                    if (i >= columns) {
                        $(elem).remove();    
                    }
                });
            });
        } else {
            $fixedColumns.find('tr').each(function (x, elem) {
                $(elem).find('th,td').each(function (i, elem) {
                    if (!$(elem).hasClass('fixed-column')) {
                        $(elem).remove();    
                    }
                });
            });
        }

        $fixedColumns.find('tr').each(function (i, elem) {
            $(this).height($table.find('tr:eq(' + i + ')').height());
        });        
    }
};

responsiveTables.init();

そしてCSS：

.table-responsive > .fixed-columns-fixed {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 2px solid #ddd;
    background-color: #fff;
}
于 2014-11-19T19:14:05.443 に答える