jquery - 具有固定列的响应表

Question

我 7 个月前就此发表过帖子，有人好心地为我指出了正确的解决方案: bootstrap 3 responsive table with fixed first column

但是，这个突然不行了，fixed column不固定了。要查看实际效果，请访问:http://nasgame.apphb.com(示例数据:搜索 Matt Vincent 并选择 Pro)

第一列现在与其余内容一起滚动。

这是操作代码:

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;
}
@media(min-width:768px) {
.table-responsive>.fixed-column {
    display: none;
}
}

Answer 1

在我看来它可以正常工作，但是因为一些克隆的表格单元格具有透明背景，您可以看到它们后面的表格:

在我的屏幕截图中，您可以看到奇数行看起来不错，因为单元格具有灰色背景。

您也可以通过为偶数单元格提供背景来解决此问题。

我认为这可能会做到:

.table-striped > tbody > tr:nth-child(even) > td {
    background-color: #fff;
}

或者，正如 3rror404 在评论中建议的那样，在整个表格上设置一个 background-color:

.table-striped > tbody {
    background-color: #fff;
}