Quiero saber cómo crear una tabla donde pueda ajustar el ancho de las columnas. No he descubierto cómo hacer esto. Si conoce la salsa secreta de esta técnica, por favor hágamelo saber.¿Cómo se crea una tabla HTML con columnas ajustables?
Creo que es tan simple como capturar un evento de clic de mouse en un área en el borde de un encabezado de celda, y luego cambiar dinámicamente el ancho de la columna mientras se arrastra el mouse.
Concepto simple, complejo de implementación. –
El widget de Yahoo UI (YUI) data table permite cambiar el tamaño de las columnas. Está disponible públicamente, pero todavía en Beta, y la biblioteca de YUI es bastante voluminosa. Cualquier implementación tendrá que estar en JavaScript/DHTML, porque las tablas HTML predeterminadas no tienen ese tipo de capacidades.
¿Está buscando el efecto de las perspectivas o está el < -> que aparece para mostrarle que cambie el tamaño de la tabla?
Suena bastante simple. – Vincent
No hay una respuesta simple como "usar alguna propiedad foobar html". Esto se hace con javascript y manipulaciones DOM.
Si tiene curiosidad por ver una implementación de esta función con Prototype, puede echar un vistazo al TableKit.
Estoy seguro de que hay implementaciones jQuery por ahí ... Me gusta mi prototipo bueno y viejo;)
Flexigrid para jQuery parece bastante dulce.
Actualización: De acuerdo con el comentario de @ Vicente el uso es muy simple ... ver el sitio para más detalles, sin embargo, para el ejemplo más básico - incluye la secuencia de comandos a continuación, conectar la funcionalidad a su mesa:
$('#myTableID').flexigrid();
o con opciones:
$('.classOfTables').flexigrid({height:'auto',striped:false});
No sé por qué esto no se estableció como la respuesta elegida, o por qué no se votó más, pero esto es realmente útil. ¡Gracias! –
Aunque esta cuadrícula tiene anchos de columna ajustables, no responde la pregunta sobre cómo implementar dicha funcionalidad en una tabla personalizada. – Vincent
Flexgrid parece ser muy poco mantenido en este momento. El sitio web está inactivo, el github no se ha actualizado desde 2014, etc. –
Incluir este CSS para hacer la columna de su tabla de anchuras ajustables ...
th {resize:horizontal; overflow:auto;}
Sabe que puede mirar el código fuente de la página en su navegador y le dirá cómo lo hacen, ¿no es así? – Mecki
Aunque podía "mirar debajo del kimono", le pedí a la misión que me explicara la respuesta. – minty