Tablas Responsive

Antes de decidir la estrategia responsive de una tabla, asignar prioridad a cada columna: P1 (siempre visible), P2 (visible si hay espacio), P3 (ocultar primero). La columna de identidad del registro (nombre, ID) es siempre P1. Los valores numéricos secundarios son P3. Esta jerarquía guía todas las decisiones posteriores.

Cuando la tabla no cabe en mobile y el card-stack no es adecuado, el scroll horizontal es la alternativa. La primera columna (identidad del registro) debe quedar sticky con position:sticky;left:0 y fondo sólido, para que el usuario siempre sepa qué fila está mirando al hacer scroll lateral.

En mobile, transformar cada fila de tabla en una tarjeta vertical con label-valor es más legible que el scroll horizontal. Cada tarjeta muestra solo las columnas P1 y P2, con las P3 colapsadas bajo un "Ver más". El patrón elimina la necesidad de scrollear en dos ejes simultáneamente.