¿Cómo manejar tablas de datos para que sean adaptables en CSS?

Manejar tablas de datos para que sean adaptables en CSS y se vean bien en pantallas pequeñas es un desafío común, ya que las tablas son inherentemente anchas. Aquí te presento algunas estrategias efectivas:

1. Desplazamiento horizontal controlado:
   Esta es a menudo la solución más sencilla y rápida. En lugar de dejar que la tabla rompa el layout de tu página, la envuelves en un contenedor div al que le aplicas overflow-x: auto;. Esto permitirá al usuario desplazarse horizontalmente dentro de ese contenedor para ver todas las columnas de la tabla, mientras el resto de la página permanece intacta.
   <div class="tabla-adaptable-contenedor">
<table>
</table>
</div>

.tabla-adaptable-contenedor {
overflow-x: auto; /* Habilita el scroll horizontal solo si es necesario */
width: 100%; /* Asegura que el contenedor no exceda el ancho de su padre */
margin-bottom: 1em; /* Espacio debajo */
}

.tabla-adaptable-contenedor table {
width: 100%; /* Para que la tabla intente ocupar el espacio */
/* O considera un min-width si quieres forzar un ancho mínimo para la tabla, ej. min-width: 600px; para que el scroll aparezca antes */
}
   Ventaja: Fácil de implementar, mantiene la estructura tabular.
   Desventaja: El scroll horizontal puede no ser la mejor experiencia de usuario en todos los casos.
2. Reorganización a formato de «tarjetas» o bloques (stacking):
   Para pantallas pequeñas, puedes usar CSS para cambiar el display de los elementos de la tabla (table, thead, tbody, tr, th, td) de manera que cada fila se presente como un bloque o «tarjeta» individual, con las celdas apiladas verticalmente. A menudo, se utilizan pseudo-elementos (::before) en las celdas de datos (td) para mostrar el contenido de la cabecera de columna como una etiqueta, mejorando la comprensión.
   /* CSS conceptual para pantallas pequeñas (ej. < 600px) */
@media (max-width: 599.98px) {
/* Ocultar cabeceras de tabla tradicionales */
table thead {
display: none;
}
table, table tbody, table tr, table td {
display: block; /* Hace que cada elemento ocupe todo el ancho */
width: 100% !important; /* Asegura el ancho completo */
}
table tr { margin-bottom: 15px; /* Espacio entre "tarjetas" */
border: 1px solid #ddd; /* Borde para cada "tarjeta" */
}
table td {
text-align: right; /* Alinea el dato a la derecha */
padding-left: 50%; /* Deja espacio para la etiqueta */
position: relative;
border-bottom: 1px dotted #eee; /* Separador sutil entre datos */
}
table td::before {
content: attr(data-label); /* Muestra el contenido del atributo data-label */
position: absolute;
left: 10px;
width: calc(50% - 20px); /* Ancho para la etiqueta */
text-align: left; font-weight: bold;
}
table td:last-child {
border-bottom: none;
}
}
   Este enfoque requiere que añadas un atributo data-label a cada <td> en tu HTML, conteniendo el texto de la cabecera de su columna. Ejemplo: <td data-label="Nombre">Juan Pérez</td>.
   Ventaja: Presenta la información de forma muy legible en vertical sin scroll horizontal.
   Desventaja: Más complejo de implementar, puede alargar mucho la página.
3. Ocultar columnas menos importantes:
   Mediante media queries, puedes aplicar display: none; a ciertas columnas (th y sus td correspondientes) que consideres menos cruciales en pantallas pequeñas.
   Ventaja: Simplifica la tabla.
   Desventaja: Se pierde información, lo que puede no ser siempre aceptable.

La elección de la técnica dependerá de la cantidad de datos, la importancia de cada columna y la experiencia de usuario que desees ofrecer. A veces, una combinación de técnicas puede ser la mejor solución.