bootstrap 3: Criando uma tabela responsiva com uma primeira coluna fixa para a usabilidade móvel aprimorada

dispositivos móveis apresentam desafios exclusivos ao exibir dados complexos em dados complexos em mesas. Para tornar as tabelas responsivas a esses dispositivos, o Bootstrap oferece a classe "responsiva à tabela". No entanto, você pode achar desejável garantir que a primeira coluna, geralmente contendo cabeçalhos de tabela, permaneça fixa e visível, mesmo quando o usuário rola horizontalmente.

$ (function () { var $ tabela = $ ('. Tabela'); var $ fixoColumn = $ tabela.Clone (). InsertBefore ($ tabela) .addclass ('coluna fixa'); $ fixercolumn.find ('th: não (: primeiro filho), td: não (: primeiro filho)'). remover (); $ flortcolumn.find ('tr'). cada (função (i, elem) { $ (this) .Height ($ tabela.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());
    });
});

. Posição: Absoluto; Exibição: bloco embutido; Largura: Auto; Fronteira: 1px Solid #DDD; Background-Color: #FFF; } @media (largura min: 768px) { .Table-responsivo> .Fixed-Column { Exibir: Nenhum; } }

$(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. então remove todas as colunas, exceto a primeira da tabela clonada. posiciona a tabela clonada absolutamente com uma largura e borda fixa, mantendo -a no lugar enquanto a tabela original rola horizontalmente. e navegação, particularmente para tabelas com inúmeras colunas.