Tabla de respuesta bootstrap 3 con primera columna fija

Me estoy enfocando específicamente en dispositivos móviles, así que tengo una tabla responsiva de Bootstrap. Es solo un div con la clase bootstrap “table-responsive” y una tabla anidada dentro con las clases “table table-striped table-table-table-hover table-condensed”.

¿Hay alguna manera fácil de asegurarse de que la primera columna esté fija (sin desplazarse horizontalmente)? En los dispositivos móviles, es probable que haya desplazamientos cada vez, pero la primera columna contiene lo que son esencialmente encabezados de tabla.

Si solo está apuntando a dispositivos móviles, esto puede funcionar para usted: puede clonar la primera columna de la tabla y aplicar la position:absolute para que aparezca “al frente” cuando se desplaza por el rest de la tabla.

Para esto, necesitarías un código jquery básico y una clase CSS personalizada:

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; } } 

Aquí hay una demostración que funciona para este enfoque