bootstrap 3 отзывчивая таблица с фиксированным первым столбцом

17

Я настроен специально для мобильных устройств, поэтому у меня есть загрузочная таблица Bootstrap. Его просто div с классом bootstrap «table-responsive» и таблицей, вложенной внутри, с классами «table-striped table-bordered table-hover table-condensed».

Есть ли простой способ убедиться, что первый столбец исправлен (не прокручивается по горизонтали)? На мобильных устройствах вероятность того, что будет прокручиваться каждый раз, но первый столбец содержит, по сути, заголовки таблиц.

    
задан CGross 02.11.2013 в 00:53
источник

1 ответ

40

Если вы ориентируетесь только на мобильные устройства, это может сработать для вас: вы можете клонировать первый столбец в своей таблице и применять 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;
    }
}

Ниже приведена рабочая демонстрация .

    
ответ дан koala_dev 02.11.2013 в 08:15
источник