jquery - 带有引导类的固定标题 html 表

Question

我有一个带有 bootstrap 样式的 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/（纯引导，无插件）

我使用了两张表格，一张用于标题，一张用于正文。我将 css 应用于身体周围的 div 以创建溢出。然后在顶部标题上使用次要样式以使标题边框对齐。希望这可以帮助！

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