Estoy orientación móviles, específicamente, así que tengo un Bootstrap responsive tabla. Solo es un div con la clase bootstrap de la tabla «sensible» y una tabla anidada dentro de las clases de la tabla «tabla de rayas de tabla tabla con borde-coloca la tabla condensada».

¿Hay alguna forma fácil de asegurarse de que la primera columna es fija (no se desplaza horizontalmente)? En dispositivos móviles, es probable que habrá un desplazamiento cada vez, pero la primera columna contiene lo que en esencia son encabezados de tabla.

InformationsquelleAutor CGross | 2013-11-01

1 Comentario

  1. 41

    Si sólo estás dirigidos a dispositivos móviles, a continuación, esto puede funcionar para usted: puede clonar la primera columna de la tabla y aplicar position:absolute, por lo que aparece «en el frente» al desplazarse el resto de la tabla.

    Para esto sería necesario básicos de código jquery y CSS personalizado de la clase:

    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í un demo para este enfoque

    • Gracias, esto es muy, muy de cerca (y algo que yo no hubiera pensado en dado mi limitado jquery conocimiento), pero en los casos con un montón de filas (y por lo tanto el desplazamiento vertical), se parece a esto: i.imgur.com/j725O8r.png
    • pruebe con position:absolute; en lugar de fijo
    • eso fue todo, muchas gracias!
    • Que no parece funcionar muy bien con bootstrap 3.2. Aquí está una modificación de violín donde el fijo de columnas de la superposición de la tabla original: jsfiddle.net/gmsa/nt7fd965/1
    • parece como el comienzo de la v3 había especificado blanco color de fondo para una capacidad de respuesta de la tabla, pero que ahora se elimina, sólo se puede añadir que a la CSS y debe verse bien: jsfiddle.net/koala_dev/nt7fd965/2
    • Sí, eso era, gracias!
    • usted demo(jsfiddle.net/4XG7T/3) no está funcionando en el móvil!?
    • Muchas gracias por esto!! 🙂
    • La adaptación de la altura de las tablas originales tr no funcionó para mí en Chrome cuando el javascript se ejecuta en el documento.ready(). En lugar de utilizar la ventana.la carga de acuerdo a la stackoverflow.com/a/12190618/865201 Funciona para mí.
    • Hay algunos render problema en Firefox 42, donde se fija la columna se ha ido cuando el cambio de tamaño de ventana. A repo, siga el paso a paso aquí: 1) Ir a jsfiddle.net/4XG7T/3 con Firefox. 2) cambiar el tamaño de las ventanas, por lo que puede desplazarse por la tabla horizontalmente. 3) Desplácese por la tabla a la derecha. 4) cambiar el tamaño de la tabla de nuevo. 5) La columna fija se ha ido.
    • ¿Cómo puedo solucionar el encabezado?
    • Esta fue una gran respuesta! También he encontrado que si se quiere mantener la columna fija después de que un usuario cambia el tamaño de la página que usted puede hacer envoltura de la JS en una función, incluyen un $(".table.fixed-column').remove() a la parte superior y añadir a la $(window).resize() eventos
    • Esto no funciona bien cuando se tiene un gran número de tablas en una página. Si usted tiene varias de la tabla que desea fijar la primera columna para el uso de este: jsfiddle.net/nt7fd965/148
    • Gracias hombre que salvar mi vida 🙂
    • ¿Alguien resuelto para móviles? Después de varias horas me estoy quedando sin idea de cómo hacer que funcione en móviles :/
    • cómo hacer que funcione para 2 columnas?

Dejar respuesta

Please enter your comment!
Please enter your name here