devices
Métodos de adaptación
horizontal_scroll
Scroll horizontal
Mantiene estructura intacta
overflow-x: auto
view_column
Ocultar columnas
Elimina columnas menos importantes
display: none
view_list
Reorganizar a lista
Convierte filas en tarjetas
display: block
flip
Transponer tabla
Intercambia filas y columnas
transform: rotate(90deg)
.table-container {
overflow-x: auto;
}
@media (max-width: 768px) {
.hide-mobile {
display: none;
}
table {
display: block;
width: 100%;
}
tr {
display: block;
margin-bottom: 20px;
border: 1px solid #ddd;
}
td {
display: block;
text-align: right;
padding: 10px;
}
td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
overflow-x: auto;
}
@media (max-width: 768px) {
.hide-mobile {
display: none;
}
table {
display: block;
width: 100%;
}
tr {
display: block;
margin-bottom: 20px;
border: 1px solid #ddd;
}
td {
display: block;
text-align: right;
padding: 10px;
}
td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
phone_iphone
Tabla en dispositivo móvil
computer
Tabla en pantalla grande
lightbulb
Recomendación
Para tablas complejas, el método de scroll horizontal es el más sencillo y efectivo