Tablas CSS.
La semántica HTML gobierna tablas; CSS mejora legibilidad sin convertirlas en una grilla opaca.
Referencia
Tailwind genera estas utilidades durante el build. Style fija los tokens aceptados, los defaults y las restricciones del grupo.
| Propiedad o familia | Uso en v10 | Criterio |
|---|---|---|
| border-collapse | collapse por defecto | Separación clara de filas y encabezados |
| border-spacing | Sólo tablas separadas | No simular cards con celdas |
| table-layout | auto por contenido; fixed en datos conocidos | Definir truncación y ancho de columna |
| caption-side | Caption superior por default | Nombre del conjunto antes de datos |
Reglas de Style
- Usar caption, thead, tbody, th y scope.
- Unidades viven en encabezado.
- Orden y filtros se comunican semánticamente.
- La vista móvil conserva relación encabezado-valor.
Contrato de uso
- Usar utilidades para ajustes locales y prototipos acotados.
- Usar una clase semántica de Kit cuando el patrón se repite o tiene comportamiento.
- No construir clases dinámicamente; cada nombre debe aparecer completo en el código fuente.
- No usar valores arbitrarios para reemplazar un token que falta. Proponer primero el token.
- Verificar 320 px, 200% de zoom, tema oscuro y reducción de movimiento cuando aplique.