{"id":7739,"date":"2022-04-22T04:31:33","date_gmt":"2022-04-22T04:31:33","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7739"},"modified":"2022-04-22T04:31:33","modified_gmt":"2022-04-22T04:31:33","slug":"3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/","title":{"rendered":"3 soluciones para adaptar las tablas a todos los dispositivos con CSS"},"content":{"rendered":"

El elemento <table> de HTML<\/strong> es un poco rebelde a la hora de adaptarse a los dispositivos m\u00e1s peque\u00f1os.<\/p>\n

Los profesionales de la maquetaci\u00f3n o el dise\u00f1o web lo sabemos y siempre estamos buscando soluciones para conseguir dise\u00f1os adaptados a todos los dispositivos y es f\u00e1cil encallarse cuando te topas con una tabla, sobre todo cuando esta tiene muchas columnas.<\/p>\n

Hoy en d\u00eda existen diversas soluciones para conseguir tablas con dise\u00f1o adaptativo.<\/p>\n

Quiz\u00e1 te has planteado el mero hecho de quitar el elemento <table> de tus dise\u00f1os con HTML<\/strong> y CSS<\/strong> simplemente por este motivo de rebeld\u00eda.<\/p>\n

Quiz\u00e1 no lo sab\u00edas pero las tablas fueron un elemento muy importante a la hora de dise\u00f1ar p\u00e1ginas web.<\/p>\n

Ya no solo por el simple hecho de mostrar una tabla con datos simples sino que por mucho tiempo fueron la estructura principal o cuerpo de la p\u00e1gina web.<\/p>\n

Hoy en d\u00eda, esto es impensable y, doy gracias a dios, porque era bastante tedioso entender la l\u00f3gica de una tabla en estructuras complejas.<\/p>\n

Esto me hace viajar en el tiempo y recordar las peleas que llegu\u00e9 a tener en mis inicios cuando me topaba con tiendas online desarrolladas con Oscommerce.<\/p>\n

Existiendo tantos elementos como los <div>, <section>, <nav>, etc, los elementos tipo <table> han quedado relegadas pero todav\u00eda siguen siendo \u00fatiles y en muchas p\u00e1ginas webs todav\u00eda te encontrar\u00e1s tablas.<\/p>\n

En este art\u00edculo vas a descubrir 3 formas de conseguir que una tabla se adapte a todos los dispositivos utilizando t\u00e9cnicas de CSS<\/strong>.<\/p>\n

Estructura b\u00e1sica de la tabla<\/h2>\n

En el ejemplo en funcionamiento he creado una tabla con bastantes columnas.<\/p>\n

A continuaci\u00f3n puedes ver el c\u00f3digo HTML<\/strong> de ejemplo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<table<\/span><\/a>><\/span>\n    <thead<\/span><\/a>><\/span>\n        <tr<\/span><\/a>><\/span>\n            <th<\/span><\/a>><\/span>Nombre<\/<\/span>th<\/span><\/a>><\/span>\n            <th<\/span><\/a>><\/span>Apellidos<\/<\/span>th<\/span><\/a>><\/span>\n            <th<\/span><\/a>><\/span>Email<\/<\/span>th<\/span><\/a>><\/span>\n            <th<\/span><\/a>><\/span>Edad<\/<\/span>th<\/span><\/a>><\/span>\n            <th<\/span><\/a>><\/span>N\u00f3mina<\/<\/span>th<\/span><\/a>><\/span>\n            <th<\/span><\/a>><\/span>Ingresos<\/<\/span>th<\/span><\/a>><\/span>\n            <th<\/span><\/a>><\/span>Gastos<\/<\/span>th<\/span><\/a>><\/span>\n            <th<\/span><\/a>><\/span>Beneficios<\/<\/span>th<\/span><\/a>><\/span>\n            <th<\/span><\/a>><\/span>Impuestos<\/<\/span>th<\/span><\/a>><\/span>\n        <\/<\/span>tr<\/span><\/a>><\/span>\n    <\/<\/span>thead<\/span><\/a>><\/span>\n    <tbody<\/span><\/a>><\/span>\n        <tr<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>Lorem<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>Ipsum<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>demo@demo.com<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>56<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>1.000\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>1.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>390<\/<\/span>td<\/span><\/a>><\/span>\n        <\/<\/span>tr<\/span><\/a>><\/span>\n        <tr<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>Lorem<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>Ipsum<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>demo@demo.com<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>56<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>1.000\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>1.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>390<\/<\/span>td<\/span><\/a>><\/span>\n        <\/<\/span>tr<\/span><\/a>><\/span>\n        <tr<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>Lorem<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>Ipsum<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>demo@demo.com<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>56<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>1.000\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>1.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n            <td<\/span><\/a>><\/span>390<\/<\/span>td<\/span><\/a>><\/span>\n        <\/<\/span>tr<\/span><\/a>><\/span>\n    <\/<\/span>tbody<\/span><\/a>><\/span>\n<\/<\/span>table<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
No deja de ser una tabla simple con 9 columnas y 3 filas para poder ver la ilustraci\u00f3n sin necesidad de usar el scroll.<\/p>\n
Estas 9 columnas nos har\u00e1n ver que ocurre en dispositivos peque\u00f1os y que podemos hacer para remediarlo.<\/p>\n
Estilos para la tabla<\/h2>\n
En la hoja de estilos CSS<\/strong> agrego algo de formato para la tabla:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
table {<\/span>\n    border-spacing<\/span>:<\/span> 0<\/span>;<\/span>\n    border-collapse<\/span>:<\/span> collapse<\/span>;<\/span>\n    width<\/span>:<\/span> 800px<\/span>;<\/span>\n    margin<\/span>:<\/span> 0px<\/span> auto<\/span>;<\/span>\n}<\/span>\n \ntd,<\/span> th {<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #ccc<\/span>;<\/span>\n    padding<\/span>:<\/span> 5px<\/span>;<\/span>\n    text-align<\/span>:<\/span> left<\/span>;<\/span>   \n}<\/span>\n \ntr:nth-<\/span>child(<\/span>even)<\/span> {<\/span>\n    background-color<\/span>:<\/span> #eee<\/span>;<\/span>\n}<\/span>\n \ntd:nth-<\/span>child(<\/span>n +<\/span> 3)<\/span>,<\/span>\nth:nth-<\/span>child(<\/span>n +<\/span> 3)<\/span> {<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n}<\/span>\n \ntbody tr:hover <\/span>{<\/span>\n    background-color<\/span>:<\/span> aquamarine;<\/span>\n}<\/span>\n \nthead {<\/span>\n    background-color<\/span>:<\/span> black<\/span>;<\/span>\n    color<\/span>:<\/span> white<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Para conseguir como resultado algo como lo que sigue:<\/p>\n
\"Tabla<\/p>\n
Soluci\u00f3n 1: Tabla responsive escondiendo columnas<\/h2>\n
Una soluci\u00f3n r\u00e1pida para que esta tabla se adapte a todos los dispositivos es decidir que columnas esconder en dispositivos m\u00e1s peque\u00f1os para que la tabla no se salga fuera de \u00f3rbita.<\/p>\n
Esto es bastante personal. En este punto vas a tener que decidir que columnas son menos importantes para no mostrarlas en dispositivos m\u00e1s peque\u00f1os.<\/p>\n
Desde mi punto de vista, las columnas menos importantes son: email, edad, impuestos, apellidos y n\u00f3mina.<\/p>\n
Seg\u00fan he podido observar con la consola del navegador, aplicando 2 puntos de corte o media queries ya he conseguido que la tabla se vea bien en todos los dispositivos.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
@media screen and (max-width: 920px) {<\/span>\n    table {<\/span>\n        width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    }<\/span>\n \n    \/* Ocultar edad *\/<\/span>\n    table tr th:nth-<\/span>child(<\/span>4)<\/span>,<\/span>\n    table tr td:nth-<\/span>child(<\/span>4)<\/span> {<\/span>\n        display<\/span>:<\/span> none<\/span>;<\/span>\n    }<\/span>\n \n    \/* Ocultar email *\/<\/span>\n    table tr th:nth-<\/span>child(<\/span>3)<\/span>,<\/span>\n    table tr td:nth-<\/span>child(<\/span>3)<\/span> {<\/span>\n        display<\/span>:<\/span> none<\/span>;<\/span>\n    }<\/span>\n \n    \/* Ocultar impuestos *\/<\/span>\n    table tr th:nth-<\/span>child(<\/span>9)<\/span>,<\/span>\n    table tr td:nth-<\/span>child(<\/span>9)<\/span> {<\/span>\n        display<\/span>:<\/span> none<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n \n@media screen and (max-width: 767px) {<\/span>\n    \/* Ocultar apellidos *\/<\/span>\n    table tr th:nth-<\/span>child(<\/span>2)<\/span>,<\/span>\n    table tr td:nth-<\/span>child(<\/span>2)<\/span> {<\/span>\n        display<\/span>:<\/span> none<\/span>;<\/span>\n    }<\/span>\n \n    \/* Ocultar n\u00f3mina *\/<\/span>\n    table tr th:nth-<\/span>child(<\/span>5)<\/span>,<\/span>\n    table tr td:nth-<\/span>child(<\/span>5)<\/span> {<\/span>\n        display<\/span>:<\/span> none<\/span>;<\/span>\n    }<\/span>\n}<\/span><\/pre><\/div><\/div>\n
En pantallas menores a 920px he empezado a detectar problemas que he solucionado ocultando la edad, el email y el impuesto.<\/p>\n
En pantallas m\u00e1s peque\u00f1as a 767px, he necesitado ocultar 2 m\u00e1s, en este caso, apellidos y n\u00f3mina dejan de ser visibles.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Para mi gusto no es la soluci\u00f3n m\u00e1s adecuada ya que esto implica ofrecer menos informaci\u00f3n a los usuarios que utilizan dispositivos peque\u00f1os.<\/p>\n
Soluci\u00f3n 2: Tabla responsive con scroll horizontal<\/h2>\n
Otra soluci\u00f3n m\u00e1s r\u00e1pida todav\u00eda es aplicar a la tabla un scroll horizontal empleando para ello una capa padre.<\/p>\n
De esta forma, la tabla se muestra al mismo tama\u00f1o original pero el usuario tiene que desplazar el dedo para visualizar el contenido oculto que hay a la derecha ya que la tabla no se muestra de forma completa.<\/p>\n
Visualmente, en dispositivos peque\u00f1os el usuario ve una barra de scroll horizontal como la siguiente:<\/p>\n
\"Tabla<\/p>\n
Esto se consigue aplicando una capa por encima de la tabla.<\/p>\n
En el ejemplo en funcionamiento he agregado el contenedor con class=\u00bbtable-responsive\u00bb de la siguiente manera:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"table-responsive"<\/span>><\/span>\n    <table<\/span><\/a>><\/span>\n        <thead<\/span><\/a>><\/span>\n            <tr<\/span><\/a>><\/span>\n                <th<\/span><\/a>><\/span>Nombre<\/<\/span>th<\/span><\/a>><\/span>\n                <th<\/span><\/a>><\/span>Apellidos<\/<\/span>th<\/span><\/a>><\/span>\n                <th<\/span><\/a>><\/span>Email<\/<\/span>th<\/span><\/a>><\/span>\n                <th<\/span><\/a>><\/span>Edad<\/<\/span>th<\/span><\/a>><\/span>\n                <th<\/span><\/a>><\/span>N\u00f3mina<\/<\/span>th<\/span><\/a>><\/span>\n                <th<\/span><\/a>><\/span>Ingresos<\/<\/span>th<\/span><\/a>><\/span>\n                <th<\/span><\/a>><\/span>Gastos<\/<\/span>th<\/span><\/a>><\/span>\n                <th<\/span><\/a>><\/span>Beneficios<\/<\/span>th<\/span><\/a>><\/span>\n                <th<\/span><\/a>><\/span>Impuestos<\/<\/span>th<\/span><\/a>><\/span>\n            <\/<\/span>tr<\/span><\/a>><\/span>\n        <\/<\/span>thead<\/span><\/a>><\/span>\n        <tbody<\/span><\/a>><\/span>\n            <tr<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>Lorem<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>Ipsum<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>demo@demo.com<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>56<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>1.000\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>1.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>390<\/<\/span>td<\/span><\/a>><\/span>\n            <\/<\/span>tr<\/span><\/a>><\/span>\n            <tr<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>Lorem<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>Ipsum<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>demo@demo.com<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>56<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>1.000\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>1.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>390<\/<\/span>td<\/span><\/a>><\/span>\n            <\/<\/span>tr<\/span><\/a>><\/span>\n            <tr<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>Lorem<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>Ipsum<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>demo@demo.com<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>56<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>2.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>1.000\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>1.560\u20ac<\/<\/span>td<\/span><\/a>><\/span>\n                <td<\/span><\/a>><\/span>390<\/<\/span>td<\/span><\/a>><\/span>\n            <\/<\/span>tr<\/span><\/a>><\/span>\n        <\/<\/span>tbody<\/span><\/a>><\/span>\n    <\/<\/span>table<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En la hoja de estilos CSS<\/strong> puedes agregar lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.table-responsive<\/span> {<\/span>\n    display<\/span>:<\/span> block<\/span>;<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    overflow-x:<\/span> auto<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
La clave est\u00e1 en el overflow-x que establezco en autom\u00e1tico para que el scroll horizontal aparezca si los datos que hay dentro ya no caben en el contenedor.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
A pesar de ofrecerte esta soluci\u00f3n que no parece del todo mala, debo decirte que no me acaba de convencer.\u00a0 Me da la sensaci\u00f3n de que no es del todo usable. Me gustar\u00eda pon\u00e9rselo m\u00e1s f\u00e1cil al usuario aunque me cueste m\u00e1s trabajo.<\/p>\n
Soluci\u00f3n 3: Tabla responsive convertida a contenedores en dispositivos peque\u00f1os<\/h2>\n
Conseguir esta soluci\u00f3n requiere m\u00e1s tiempo pero me parece la m\u00e1s adecuada de todas ya que, en todas las resoluciones, la tabla se muestra de forma correcta y completa.<\/p>\n
Esta soluci\u00f3n consiste en disponer de la tabla original en pantallas de escritorio y para dispositivos m\u00e1s peque\u00f1os disponer de un contenedor para mostrar los datos de la tabla en 2 columnas: cabecera y datos.<\/p>\n
En la estructura HTML<\/strong>, despu\u00e9s del c\u00f3digo de tu <table>, puedes agregar la estructura de la tabla usando contenedores.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"table"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"item"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Nombre<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>Lorem<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Apellidos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>Ipsum<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Email<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>demo@demo.com<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Edad<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>56<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>N\u00f3mina<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>2.560\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Ingresos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>2.560\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Gastos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>1.000\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Beneficios<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>1.560\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Impuestos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>390<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"item"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Nombre<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>Lorem<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Apellidos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>Ipsum<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Email<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>demo@demo.com<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Edad<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>56<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>N\u00f3mina<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>2.560\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Ingresos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>2.560\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Gastos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>1.000\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Beneficios<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>1.560\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Impuestos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>390<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"item"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Nombre<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>Lorem<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Apellidos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>Ipsum<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Email<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>demo@demo.com<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Edad<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>56<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>N\u00f3mina<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>2.560\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Ingresos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>2.560\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Gastos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>1.000\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Beneficios<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>1.560\u20ac<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"thead"<\/span>><\/span>Impuestos<\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"tbody"<\/span>><\/span>390<\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Se que la cabecera se repite en cada fila pero me lo vas a agradecer cuando veas el resultado final.<\/p>\n
En cualquier caso, si esta tablas la armas de forma din\u00e1mica con un lenguaje de programaci\u00f3n como PHP<\/strong> por ejemplo, podr\u00e1s crear un c\u00f3digo m\u00e1s din\u00e1mico y simple para generar este tipo de contenido.<\/p>\n
Bien, en la hoja de estilos CSS<\/strong>, este nuevo contenedor que he agregado justo despu\u00e9s de mi tabla lo ocultar\u00e9 de entrada con:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
div.table<\/span> {<\/span>\n    display<\/span>:<\/span> none<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Luego, sabiendo que a partir de 920px de ancho es cuando se presentan los problemas con mi tabla original, puedo armar una media query como la siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
@media screen and (max-width: 920px) {<\/span>\n    table {<\/span>\n        display<\/span>:<\/span> none<\/span>;<\/span>\n    }<\/span>\n \n    div.table<\/span> {<\/span>\n        display<\/span>:<\/span> block<\/span>;<\/span>\n        width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    }<\/span>\n \n    div.item<\/span> {<\/span>\n        margin-bottom<\/span>:<\/span> 10px<\/span>;<\/span>\n    }<\/span>\n \n    div.row<\/span> {<\/span>\n        display<\/span>:<\/span> flex;<\/span>\n        justify-content<\/span>:<\/span> start;<\/span>\n        align-items:<\/span> center<\/span>;<\/span>\n        flex-direction<\/span>:<\/span> row;<\/span>\n    }<\/span>\n \n    div.tbody<\/span>,<\/span> div.thead<\/span> {<\/span>\n        border<\/span>:<\/span> 1px<\/span> solid<\/span> #ccc<\/span>;<\/span>\n        padding<\/span>:<\/span> 5px<\/span>;<\/span>\n        text-align<\/span>:<\/span> left<\/span>;<\/span>\n        width<\/span>:<\/span> 50<\/span>%<\/span>;<\/span>\n    }<\/span>\n \n    div.thead<\/span> {<\/span>\n        background-color<\/span>:<\/span> #eee<\/span>;<\/span>\n    }<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Donde la tabla original que oculta y el contenedor se muestra al 100%.<\/p>\n
Con la clase .row debes saber que la estoy usando para representar lo que ser\u00eda en la tabla una fila.<\/p>\n
Y la clase .item representa un elemento de la tabla.<\/p>\n
Con un poco de maquetaci\u00f3n y Flexbox puedo conseguir el siguiente efecto:<\/p>\n
\"div<\/p>\n
\u00bfAtractivo y usable a la vez verdad?<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Conclusiones<\/h2>\n
Quiz\u00e1 eres de mentalidad antigua pero te desaconsejo literalmente el uso de tablas para el dise\u00f1o de las estructuras de tus p\u00e1ginas Webs. Te garantizo que ser\u00e1 un dolor de cabeza adaptar una p\u00e1gina web estructurada con tablas en los dispositivos m\u00e1s peque\u00f1os.<\/p>\n
Utilizar contenedores y las t\u00e9cnicas m\u00e1s avanzadas de CSS<\/strong> tales como las media queries son las soluciones que te recomiendo en este momento.<\/p>\n
El caso es que este no es el \u00fanico inconveniente a usar tablas. Crear una estructura ser\u00e1 m\u00e1s complicado y requerir\u00e1 m\u00e1s c\u00f3digo HTML<\/strong>. Lo que conlleva m\u00e1s peso para la carga y esto afectar\u00eda considerablemente al posicionamiento en buscadores.<\/p>\n
A pesar de esto, no quiero darte a entender que debes olvidarte de las tablas por completo.<\/p>\n
Las tablas HTML<\/strong> las puedes utilizar para presentar ordenadamente una serie de datos tales como una clasificaci\u00f3n de equipos de f\u00fatbol, una lista de empleados, un lote de productos, etc pero, eso si, en dispositivos m\u00f3viles deber\u00e1s pensar en cual es la mejor soluci\u00f3n para presentarlas de forma correcta.<\/p>\n
Por cierto, \u00bfC\u00f3mo consigues que tus tablas se vean bien en dispositivos peque\u00f1os? \u00bfConoces alguna t\u00e9cnica mejor?<\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre 3 soluciones para conseguir que las tablas de tu sitio web se adapten correctamente a todos los dispositivos. Tabla responsive.<\/p>\n","protected":false},"author":1,"featured_media":7744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[69],"class_list":["post-7739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-tablas"],"yoast_head":"\n3 soluciones para adaptar las tablas a todos los dispositivos con CSS - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre 3 soluciones para conseguir que las tablas de tu sitio web se adapten correctamente a todos los dispositivos. Tabla responsive.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 soluciones para adaptar las tablas a todos los dispositivos con CSS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre 3 soluciones para conseguir que las tablas de tu sitio web se adapten correctamente a todos los dispositivos. Tabla responsive.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-22T04:31:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/\",\"name\":\"3 soluciones para adaptar las tablas a todos los dispositivos con CSS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-CSS.png\",\"datePublished\":\"2022-04-22T04:31:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre 3 soluciones para conseguir que las tablas de tu sitio web se adapten correctamente a todos los dispositivos. Tabla responsive.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-CSS.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-CSS.png\",\"width\":500,\"height\":500,\"caption\":\"Tablas responsive\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3 soluciones para adaptar las tablas a todos los dispositivos con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3 soluciones para adaptar las tablas a todos los dispositivos con CSS - Jose Aguilar Blog","description":"Descubre 3 soluciones para conseguir que las tablas de tu sitio web se adapten correctamente a todos los dispositivos. Tabla responsive.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"3 soluciones para adaptar las tablas a todos los dispositivos con CSS - Jose Aguilar Blog","og_description":"Descubre 3 soluciones para conseguir que las tablas de tu sitio web se adapten correctamente a todos los dispositivos. Tabla responsive.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-04-22T04:31:33+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-CSS.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/","url":"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/","name":"3 soluciones para adaptar las tablas a todos los dispositivos con CSS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-CSS.png","datePublished":"2022-04-22T04:31:33+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre 3 soluciones para conseguir que las tablas de tu sitio web se adapten correctamente a todos los dispositivos. Tabla responsive.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-CSS.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-CSS.png","width":500,"height":500,"caption":"Tablas responsive"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/3-soluciones-para-adaptar-las-tablas-a-todos-los-dispositivos-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"3 soluciones para adaptar las tablas a todos los dispositivos con CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7739"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7739\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7744"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}