bootstrap 3: Создание отзывчивой таблицы с фиксированным первым столбцом для улучшения мобильного удобства

мобильные устройства представляют уникальные проблемы при отображении сложных данных в столы. Чтобы сделать таблицы, адаптирующиеся на эти устройства, Bootstrap предлагает класс «реагирования на таблицу». Тем не менее, вам может быть желательным убедиться, что первый столбец, часто содержащий заголовки таблицы, остается фиксированным и видимым, даже когда пользователь прокручивает горизонтально.

$ (function () { var $ table = $ ('. Таблица'); var $ fixedcolumn = $ table.clone (). insertbefore ($ table) .adclass ('фиксированная колонка'); $ fixedcolumn.find ('th: not (: первой ребенок), td: not (: first-child)'). rement (); $ filedColumn.find ('tr'). Каждый (function (i, elem) { $ (this) .height ($ table.find ('tr: eq (' i ')'). height ()); }); });

$(function(){
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq('   i   ')').height());
    });
});

. позиция: абсолютно; дисплей: встроенный блок; Ширина: Авто; граница правая: 1PX SOLID #DDD; фоновый цвет: #fff; } @Media (мин-ширина: 768px) { .table-respenceive> .fixed-Column { дисплей: нет; } }

$(function(){
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq('   i   ')').height());
    });
});

]
1. затем удаляет все столбцы, за исключением первого из клонированной таблицы.
2. он регулирует высоту рядов в клонированной таблице, чтобы соответствовать исходной таблице.
3. код CSS Размещает клонированную таблицу абсолютно фиксированной шириной и границей, сохраняя ее на месте, пока исходная таблица прокручивается горизонтально. и навигация, особенно для таблиц с многочисленными столбцами.