javascript - studio - La fila de la tabla MOSTRAR/OCULTAR*Sin*Redimensionar el ancho de la columna, con TableLayout: auto

ocultar<td> javascript

Question

Tengo una tabla con varias filas, mostrando los artículos a la venta. Cuando el usuario hace clic en una fila, un Javascript inserta / muestra una nueva fila justo debajo de ella con detalles sobre el elemento. El problema es que cuando la descripción es larga, fuerza el ancho de las columnas para reajustar / cambiar el tamaño. Esto cambia las posiciones de las columnas y es realmente molesto, especialmente para el usuario. En este momento, tengo mi table.style.tableLayout: auto. En realidad, lo prefiero de esta manera, porque las columnas se ajustan al contenido.

Mi pregunta es: ¿cómo puedo "bloquear" dinámicamente el ancho de las columnas en mi tabla para que cuando inserte / muestre la nueva fila, las columnas no se reajusten / cambien de tamaño?

He intentado:

1. estableciendo dinámicamente la tabla para "tableLayout: fixed" temporalmente
2. insertando / mostrando mi nueva fila
3. cambiando la tabla a "tableLayout: auto"

Las acciones 1 y 2 funcionan en Firefox, pero no en Safari e IE (6 y 7). Sin embargo, hacer los tres parece evitar que las columnas se muevan demasiado.

La frustración es insoportable ... perder mucho sueño ... ¡por favor ayuda!

Gracias.

Answer 1

No sé si estás familiarizado con jquery, pero eso es lo que usaría, en combinación con una clase separada para la columna que está causando el cambio de tamaño en la nueva fila, para:

1. Calcular / obtener el con de la columna
2. Establecer el conjunto de la clase mencionada anteriormente
3. Agrega la fila

No lo he intentado, pero debería hacerlo.

Por cierto, probablemente haya otras maneras de hacerlo, estoy más familiarizado con jquery (para el punto 1. y 2.).

Answer 2

Puede visualizar los detalles de la fila debajo del clic en DIV y configurar su

style="overflow:auto";

para que los detalles se envuelvan y la barra de desplazamiento esté disponible para mostrar todo el texto.

Answer 3

Establecería un porcentaje de ancho en cada columna simplemente como una guía. Configúrelo solo una vez en el TH de cada columna. El navegador aún ajustará las columnas al contenido si es necesario, pero las columnas permanecerán en su lugar de manera más consistente.

Luego, nunca pondría css "white-space: nowrap" en ninguna parte de esa tabla. Una descripción larga no debe romper el diseño de la tabla, debe envolverse adecuadamente en varias líneas y ser legible si establece los anchos en cada columna para adecuarla al tipo de datos. De manera similar, mantendría el uso de (espacios no rompibles) a fechas, horas y números, y permitiría que el texto se ajustara.

Aparte de eso, hago esto en mi trabajo a tiempo parcial, y hay un momento en que debes dejar de arrullar pelos pidiéndole al navegador que haga algo para lo que no está diseñado. El contenido debe fluir y adaptarse. Bloquear el ancho de las columnas a píxeles es 99.99999% del tiempo una mala idea.

PD: si realmente, de verdad, REALMENTE necesita bloquear columnas, la única solución que conozco que funciona con CSS2 y en todos los navegadores es usar imágenes. Puede insertar una imagen gif transparente alta 1px en cada columna, y contar en el relleno de las celdas (TD), establecer un ancho de píxel en cada imagen (IMG), en lugar de en las columnas (TH / TD). Podrías esconder esos en el TH por ejemplo. Puede dejar las imágenes a 1 píxel de ancho y establecer el ancho porcentual en los TD, y cuando abra una nueva fila, obtendrá el ancho de cada columna menos el Relleno TD y lo configurará en el IMG correspondiente. ¡No lo he intentado! Solo sé que en muchos proyectos en los que he trabajado, he usado imágenes gif pequeñas para bloquear un espaciado vertical mínimo entre columnas, por ejemplo.

Answer 4

Para aquellos que buscan el código (esto se hace en jQuery). Esto también asume que la primera fila tiene los anchos adecuados para cada celda. Cambios bastante fáciles si es necesario.

$(''table.class_of_table_to_fix tr:first td'').each(function() {
   $(this).css({''width'': $(this).width()+"px"});
});

Answer 5

Tuve un problema similar cuando estaba implementando una tabla con grupos que podían cambiarse. Quería que la proporción inicial entre las columnas permaneciera igual sin fijar el ancho de las columnas. De forma predeterminada, el navegador cambiaría los anchos según la visibilidad de las filas de la tabla, lo que no era deseable.

Seguí y seguí la sugerencia de @faB de aplicar porcentajes, pero al hacerlo usé un pequeño script que calcularía los porcentajes de los th elementos y los aplicaría después de la renderización inicial. Esto hizo que mis columnas mantuvieran el mismo ancho, incluso con todas las filas ocultas.

Aquí está el script, que usa jQuery:

(function($){

    var lock_widths = function() {
        var total_width = $(''table'').innerWidth();
        var headers = $(''table th'');
        var leftover = 100;

        $.each(headers, function(ix, el) {
            var header = $(el), width;

            // on the last call use the leftover percentage
            if (ix == headers.length - 1) {
                width = leftover;
            } else {
                leftover -= width = header.outerWidth() / total_width * 100; 
            }

            header.css({''width'': width + ''%''});
        });
    };

    $(document).ready(lock_widths);

})(jQuery);

Probado en IE7 +, Firefox y Chrome. Esto funciona para mi caso especial porque tengo columnas de encabezado como referencia, pero podría reescribirse para medir algunas otras columnas.