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

这里是 工作演示 此方法

Here's a working demo for this approach

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