Загрузочная таблица 3 с фиксированной первой колонкой

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

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

Ответы

Ответ 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;
    }
}

Здесь рабочая демонстрация для этого подхода