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

17

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

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

    
задан CGross 02.11.2013 в 00:53
источник
  • Если вы ищете способ достижения этого в угловом режиме, см. stackoverflow.com/a/33728417/111438 –  niaher 23.11.2015 в 09:25

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
источник
  • Спасибо, это действительно очень близко (и что-то, о чем я бы не подумал, учитывая мои ограниченные знания jquery), но в случаях с большим количеством строк (и, таким образом, с вертикальной прокруткой) это выглядит так: i.imgur.com /j725O8r.png –  CGross 02.11.2013 в 14:10
  • @CGross try с позицией: absolute; вместо фиксированного –  koala_dev 03.11.2013 в 04:07
  • , вот и все, спасибо вам большое! –  CGross 03.11.2013 в 13:53
  • @Gus похоже, что ранний v3 имел заданный белый цвет фона для отзывчивой таблицы, но теперь он удален, вы можете просто добавить это в CSS, и он должен выглядеть хорошо: jsfiddle.net/koala_dev/nt7fd965/2 –  koala_dev 08.08.2014 в 19:03
  • @koala_dev ваша рабочая демонстрация (jsfiddle.net/4XG7T/3) не работает на мобильных устройствах !? –  Florian Widtmann 09.12.2014 в 13:21
Показать остальные комментарии