具有固定第一列的引导程序 3 响应表 [英] bootstrap 3 responsive table with fixed first column

问题描述

我专门针对移动设备，所以我有一个 Bootstrap 响应表.它只是一个带有引导类table-responsive"的 div 和一个嵌套在类table table-striped table-bordered table-hover table-condensed"中的表格.

I am targeting mobile specifically so I have a Bootstrap responsive table. Its just a div with the bootstrap class "table-responsive" and a table nested inside with the classes "table table-striped table-bordered table-hover table-condensed".

有什么简单的方法可以确保第一列是固定的(不是水平滚动)?在移动设备上，很可能每次都会滚动，但第一列包含本质上是表格标题的内容.

Is there any easy way to make sure that the first column is fixed (not scrolling horizontally)? On mobile devices, its likely that there will be scrolling every time but the first column contains what are essentially table headers.

推荐答案

如果您只针对移动设备，那么这可能对您有用:您可以克隆表中的第一列并应用 position:absolute 所以当你滚动表格的其余部分时它会出现在前面".

If you're only targeting mobile devices then this may work for you: you can clone the first column in your table and apply position:absolute so it appears "in front" when you scroll the rest of the table.

为此，您需要一些基本的 jquery 代码和自定义 CSS 类:

For this you'd need some basic jquery code and a custom CSS class:

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

这是此方法的工作演示

Here's a working demo for this approach

这篇关于具有固定第一列的引导程序 3 响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！