具有固定第一列的bootstrap 3响应表

一尘不染

具有固定第一列的bootstrap 3响应表

css

我专门针对移动设备，因此我有一个Bootstrap响应表。它只是一个带有引导类“表响应”的div和一个嵌套在表中的类，该类与“表表条纹表边界表悬停表压缩表”类嵌套在一起。

有什么简单的方法可以确保第一列是固定的（不是水平滚动）？在移动设备上，每次可能都有滚动，但第一列实际上包含表标题。

阅读 346

2020-05-16

共1个答案

一尘不染

如果您仅针对移动设备，那么这可能对您有用：您可以克隆表中的第一列并应用，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;
    background-color: #fff; /* bootstrap v3 fix for fixed column background color*/
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

2020-05-16