Tablas Responsive. Una Solución

Tablas Responsive. Una Solución

La maquetación de tablas para dispositivos móviles es una preocupación extendida entre nuestro gremio. Si es cierto que hace mucho que no se emplean tablas en la maquetación, también lo es que para presentar ciertos datos, son casi de obligado uso.

Tablas de precios, de servicios, de productos, comparativas, de resultados… antes o después tod@s nos hemos tenido que enfrentar a una tabla en una web y su consiguiente adaptación para dispositivos móviles.

Rebuscando y probando, di con éste post de CSS-Tricks, lo probé, y funciona a la perfección. Con unos sencillísimos ajustes de css, sin plugins ni códigos que puedan interferir o «ensuciar», me parece la mejor solución que hay por el momento.

1.Tabla y css

Comenzamos con una tabla normal y los estilos básicos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de tabla responsive</title>
<style type="text/css">
 /* 
Estilo básico
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
</style>
</head>
 
<body>
  <table class="tabla">
  <thead>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Edad</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Mary</td>
    <td>Smith</td>
    <td>32</td>
  </tr>
  <tr>
    <td>Sam</td>
    <td>Harris</td>
    <td>22</td>
  </tr>
  </tbody>
</table>
</body>
</html>

2. Media Queries

Con 760px como referencia, obligamos ala tabla a, digamos, dejar de comportarse como una tabla, añadiendo el siguiente código :

/* 
A menos de 760px de ancho
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Forzamos a la tabla a dejar de ser una tabla */
  table, thead, tbody, th, td, tr { 
    display: block; 
  }
  
  /* Escondemos los "headers", pero no con display:none por accesibilidad */
  thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr { border: 1px solid #ccc; }
  
  td { 
    /* Hacemos que se comporte como una "fila" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
  }
  
  td:before { 
   
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }
  
  /*
  Ponemos nombre a los datos
  */
  td:nth-of-type(1):before { content: "First Name"; }
  td:nth-of-type(2):before { content: "Last Name"; }
  td:nth-of-type(3):before { content: "Job Title"; }
  td:nth-of-type(4):before { content: "Favorite Color"; }
  td:nth-of-type(5):before { content: "Wars of Trek?"; }
  td:nth-of-type(6):before { content: "Porn Name"; }
  td:nth-of-type(7):before { content: "Date of Birth"; }
  td:nth-of-type(8):before { content: "Dream Vacation City"; }
  td:nth-of-type(9):before { content: "GPA"; }
  td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

Y ya está. Así de simple.

El archivo de prueba quedaría así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de tabla responsive</title>
<style type="text/css">
 /* 
Estilo básico
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  
  table, thead, tbody, th, td, tr { 
    display: block; 
  }
  
  
  thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr { border: 1px solid #ccc; }
  
  td { 
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
  }
  
  td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }
  
  /*
  */
  td:nth-of-type(1):before { content: "First Name"; }
  td:nth-of-type(2):before { content: "Last Name"; }
  td:nth-of-type(3):before { content: "Job Title"; }
  td:nth-of-type(4):before { content: "Favorite Color"; }
  td:nth-of-type(5):before { content: "Wars of Trek?"; }
  td:nth-of-type(6):before { content: "Porn Name"; }
  td:nth-of-type(7):before { content: "Date of Birth"; }
  td:nth-of-type(8):before { content: "Dream Vacation City"; }
  td:nth-of-type(9):before { content: "GPA"; }
  td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
</style>
</head>
 
<body>
  <table class="tabla">
  <thead>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Edad</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Mary</td>
    <td>Smith</td>
    <td>32</td>
  </tr>
  <tr>
    <td>Sam</td>
    <td>Harris</td>
    <td>22</td>
  </tr>
  </tbody>
</table>
</body>
</html>

Cancel reply

Your email address will not be published. Required fields are marked*

Tablas Responsive. Una Solución

LEAVE A REPLY

Cancel reply