< Tu wordpress a medida />
Tabla Responsive con HTML y CSS

Tabla Responsive con HTML y CSS

Algunas veces nos han preguntado como hacer una tabla responsive en HTML y en CSS que sea sencilla, compatible con todos los dispositivos y que sirva para cualquier plantilla. Pues aquí os dejamos el código HTML y CSS para que la puedas añadir en tu web modificándola a tu gusto.

Quedaría de esta manera

tabla-responsive-html

CÓDIGO HTML

<table class="tablazul">
<thead>
<tr>
<th>Título 1</th>
<th>Título 2</th>
<th>Título 3</th>
<th>Título 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Contenido Celda 1</td>
<td>Contenido Celda 1</td>
<td>Contenido Celda 1</td>
<td>Contenido Celda 1</td>
</tr>
<tr>
<td>Contenido Celda 2</td>
<td>Contenido Celda 2</td>
<td>Contenido Celda 2</td>
<td>Contenido Celda 2</td>
</tr>
<tr>
<td>Contenido Celda 3</td>
<td>Contenido Celda 3</td>
<td>Contenido Celda 3</td>
<td>Contenido Celda 3</td>
</tr>
<tr>
<td>Contenido Celda 4</td>
<td>Contenido Celda 4</td>
<td>Contenido Celda 4</td>
<td>Contenido Celda 4</td>
</tr>
</tbody>
</table>

CÓDIGO CSS

table.tablazul {
  border: 1px solid #DDDDDD;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.tablazul td, table.tablazul th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.tablazul tbody td {
  font-size: 13px;
	    padding-left: 5px;
}
table.tablazul tr:nth-child(even) {
  background: #DADBE2;
}
table.tablazul thead {
  background: #006AA3;
}
table.tablazul thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
	    padding-left: 5px;
}

 

Espero que esta tabla te ayude a crear la tuya propia y, si necesitas algún desarrollo más a medida, escríbenos.

¿Ha sido útil esta publicación?
Déjanos tu feedback para poder ayudar a otros usuarios.
0
No0

Deja un comentario