我专门针对移动，所以我有一个Bootstrap响应表。它只是一个div与引导类“表响应”和一个嵌套在表“table table-striped table-bordered table-hover table-condensed”中的表。
有没有简单的方法来确保第一列是固定的(不是水平滚动)？在移动设备上，它可能每次都会滚动，但第一列包含本质上的表头。
解决方法
如果您只针对移动设备，那么这可能适用于您：您可以克隆表中的第一列，并应用position：absolute，以便在滚动表的其余部分时显示“在前面”。
为此，您需要一些基本的jQuery代码和一个自定义的CSS类：
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;
}
}
这是一个working demo这个方法
