Bootstrap 3: Creación de una tabla receptiva con una primera columna fija para una usabilidad móvil mejorada

Los dispositivos móviles presentan desafíos únicos al mostrar datos complejos en tablas. Para hacer que las tablas respondan en estos dispositivos, Bootstrap ofrece la clase "sensible a la mesa". Sin embargo, es posible que sea deseable asegurarse de que la primera columna, que a menudo contiene encabezados de tabla, permanezca fija y visible incluso cuando el usuario se desplaza horizontalmente.

para lograr esto es a través de una combinación de jQuery y CSS:

jQuery Code

$(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());
    });
});

CSS Code

.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

explicación

1. el código jQuery clama la tabla original y la inserta ante la tabla, dándole la clase "columna fija"
2. luego elimina todas las columnas, excepto la primera de la tabla clonada.
3. ajusta la altura de las filas en la tabla clonada para que coincida con la tabla original.
4. el código CSS posiciona la tabla clonada absolutamente con un ancho y borde fijos, manteniéndola en su lugar mientras la tabla original se desplaza horizontalmente.

este enfoque asegura que la primera columna de la tabla permanezca fija en dispositivos móviles, mejorando la usabilidad y navegación, particularmente para tablas con numerosas columnas.