Descargar: Tablas flexibles CSS3 receptivas

Las tablas Flexbox CSS3 receptivas son tablas CSS3 verdaderamente receptivas basadas en el modelo flexbox con filas expandibles/contraíbles, filtrado de columnas, información sobre herramientas y control de ajuste de texto. Ligero (sin javascript, sin íconos o gráficos), fácil de configurar y administrar, contiene muchos componentes de celdas de tabla bien diseñados para varias aplicaciones, incluidos botones, barras de estado e íconos de verificación/cruz.

Con Responsive CSS3 Flexbox Tables, puede crear cualquier tabla. Solo necesita unas pocas columnas y filas, ¿no hay opciones adicionales? ¡Hecho! ¿O necesita preparar una tabla de varias columnas con filas desplegables (expandibles)? ¡No hay problema! Harás todo editando un solo archivo HTML.

Todas las funcionalidades presentadas en la vista previa en vivo son una opción: no necesita usar las filas expandibles, el filtrado de columnas o la alternancia de ajuste de texto, solo comente las líneas de código apropiadas para crear una tabla adecuada a sus necesidades. Independientemente del número de filas o columnas, su tabla siempre se mostrará correctamente en dispositivos equipados con pantallas más pequeñas.

Última versión: 11.06.2019 – v2.0. Revisa el registro de cambios

Características principales de las tablas flexibles CSS3 receptivas

Disposición Responsive

Las tablas CSS3 Flexbox son totalmente receptivas y se adaptan perfectamente a cualquier dispositivo móvil.

Filtrado de columnas

La opción de filtrado de columnas le permite ocultar las columnas seleccionadas para facilitar la comparación de datos.

Filas expandibles/ plegables

Puede hacer que cualquier fila de la tabla sea expandible/contraíble con un clic. Expandir la fila revela el contenido oculto que puede basarse en un diseño de una sola columna o de varias columnas. El contenido oculto también puede ser una tabla anidada.

Cambio de ajuste de texto / información sobre herramientas

Las tablas vienen con un botón de control de ajuste de texto con la capacidad de ajustar el texto de la tabla de forma predeterminada (no mediante la palanca). Información sobre herramientas de celdas de tabla es otra opción. Úselos tanto en el encabezado como en el área de contenido de la tabla.

Esquemas de color

Puede usar diferentes esquemas de color para obtener un aspecto diferente de la mesa.

Botón / Botón de expansión de fila oculta

Los elementos opcionales de la tabla incluyen botones estándar y botones que expanden/contraen filas ocultas de la tabla.

Barra de estado/Etiqueta de estado

La barra de estado o la etiqueta de estado se pueden utilizar para mostrar el progreso de un proceso, por ejemplo, un proceso de reserva.

Icono de verificación y cruz / Formulario de equipo

Íconos adicionales con símbolos de verificación y cruz y componentes que ilustran la forma deportiva del equipo, perfectos para la tabla de clasificación.

Lista de características extendidas

Tabla CSS3 pura
Sin JavaScript
Compatibilidad con lectores de pantalla
Semántica retenida por ARIA
Basado en el modelo Flexbox
Verdaderamente receptivo y listo para la retina
Filas expandibles/ plegables
Modo Acordeón (Títulos Expandibles/ Plegables)
Capacidad para mostrar el diseño de una o varias columnas en la sección expandible/plegable
Capacidad para mostrar la tabla anidada en la sección expandible/plegable
Filtrado de columnas para una comparación de datos más fácil
Información sobre herramientas de celdas de tabla
Cambio de ajuste de texto
Capacidad para ajustar el texto de la tabla de forma predeterminada (no por la palanca)
Capacidad para ocultar los botones de ajuste de texto y filtrado de columnas
Capacidad para expandir varias filas (comportamiento predeterminado)
Capacidad para expandir solo una fila a la vez
3 esquemas de color
6 tablas de demostración preconstruidas
Componentes de celda de tabla personalizados:
- Botón
- Botón de expansión de fila oculta
- Icono de verificación/cruz
- Barra de estado
- Etiqueta de estado
- Información sobre herramientas
- Forma del equipo (Tabla de la liga)
Capacidad para forzar que la columna de la tabla sea más ancha o más estrecha (según el tipo de datos que almacene)
Código XHTML válido
Compatible con navegador cruzado
Documentación detallada

Este artículo es compatible

El soporte se realiza a través de nuestro Foro de soporte. Estamos en GMT +1 y nuestro objetivo es responder todas las preguntas dentro de las 24 horas de lunes a viernes. En algunos casos el tiempo de espera puede extenderse a 48 horas. Las solicitudes de soporte enviadas durante los fines de semana o días festivos se procesarán el próximo lunes o el siguiente día hábil.

Más de 100 000 clientes confían en nosotros

Somos un equipo de personas apasionadas con más de 15 años de experiencia y más de 10 años de nuestra presencia en Envato Market. Nos especializamos en WordPress, diseño y desarrollo. Síganos para mantenerse actualizado mientras continuamos elaborando nuestros trabajos.