Tabla HTML responsive CSS Pure

Vista prévia

Descripción

Sin embargo, otro CSS sólo solución de tabla adaptable para convertir la tabla HTML ancho normal en bloques agrupados en el móvil.

Funcionamiento

Agregue el atributo ' Data-Label ' a los encabezados de la tabla de la siguiente manera:

<table class="responsive">

<thead>


<tr>



<th>#</th>



<th>code</th>



<th>name</th>



<th>actions</th>


</tr>

</thead>

<tbody>


<tr>



<td data-label="#">1</td>



<td data-label="code">101</td>



<td data-label="name">john doe</td>



<td data-label="actions"><ul class="actions">





<li> <a href="#">view</a> </li>





<li> <a href="#">edit</a> </li>





<li> <a href="#">delete</a> </li>




</ul></td>


</tr>


<tr>



<td data-label="#">2</td>



<td data-label="code">102</td>



<td data-label="name">jane doe</td>



<td data-label="actions"><ul class="actions">





<li> <a href="#">view</a> </li>





<li> <a href="#">edit</a> </li>





<li> <a href="#">delete</a> </li>




</ul></td>


</tr>


<tr>



<td data-label="#">3</td>



<td data-label="code">103</td>



<td data-label="name">anonymous other</td>



<td data-label="actions"><ul class="actions">





<li> <a href="#">view</a> </li>





<li> <a href="#">edit</a> </li>





<li> <a href="#">delete</a> </li>




</ul></td>


</tr>

</tbody>
</table>

A continuación, inserte el responsive-Table. CSS en la sección head del documento. Hecho.

<link rel="stylesheet" href="styles/responsive-table.css">