jquery - ブートストラップ クラスを使用した固定ヘッダー html テーブル

Question

ブートストラップ スタイルの html テーブルがあり、このサンプルで指定されている固定ヘッダー テーブルとして作成しようとしています。ただし、テーブルのヘッダーとボディの間で列がずれています。

で試しました

$fixedColumn.find('thead').find('tr:first').find('th').each(function (i, elem) {
    var w = $table.find('tbody').find('tr:first').find('td:eq(' + i + ')').width();
     $(this).css({width: w});  
});

しかし、役に立たない。列の正確な幅を固定ヘッダー列に設定するにはどうすればよいですか?

Answer 1

このようなもの？http://jsfiddle.net/swm53ran/139/ (純粋なブートストラップ、プラグインなし)

ヘッダー用と本文用の 2 つのテーブルを使用しました。ボディの周りの div に css を適用して、オーバーフローを作成しました。次に、上部ヘッダーにマイナー スタイルを適用して、ヘッダーの境界線を揃えます。お役に立てれば！

<div class="col-xs-12" style="padding-right:21px;">
    <table class="table table-bordered" style="margin-bottom:0px;">
        <thead>
            <tr>
                <th>Top Header</th>
                <th>Top Header</th>
                <th>Top Header</th>
                <th>Top Header</th>
            </tr>
        </thead>
    </table>
</div>
<div class="col-xs-12 scroll">
    <table class="table table-bordered" >
        <tbody>
            <tr>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
            </tr>
            <tr>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
            </tr>
        </tbody>
    </table>
</div>

.scroll {
    height:100px;
    overflow-y: auto;
    padding-right:0px;
}