Elementos HTML con scroll

En este Artículo veremos como crear elementos HTML con scroll en nuestra web, estos elementos pueden ser una tabla, una lista o lo que tú desees.

Veamos el problema:

Muchas veces los creadores de contenido se topan con este problema de que el contenido de su tabla es demasiado grande y empieza a aplastarse en vez de tener una solución más agradable gráficamente. La mayoria de estas personas son blogueros.

En el caso de un carrito de compras supongamos que el cliente compra demasiados productos esto puede darse en un supermercado por ejemplo, donde el cliente compra múltiples productos distintos.

¿Quién debe tener el scroll?

En todos los elementos que tienen scroll debemos preguntarnos es quien tiene el scroll, muy a menudo pasa en que las personas no toman esto en cuenta y no sale lo que quieren.

<style>
.tscroll{
overflow-x:scroll;
width:400px;
}
</style>
<table class="tscroll">
<tr>
<th>nombre</th>
<th>apellido</th>
<th>edad</th>
<th>telefono</th>
<th>ciudad</th>
<th>direccion</th>
</tr>
<tr>
<td>Raul</td>
<td>Caceres</td>
<td>12</td>
<td>097******</td>
<td>Guadalajara</td>
<td>Talcahuano</td>
</tr>
</table>

Nuestro Resultado:

Que tiene mal el ejemplo anterior? Pues que el scroll no iría en la tabla sino sobre su pariente, pongase a pensar ¿quien debe cumplir la función scroll?

<style>
.tscroll2{
overflow:scroll-x;
width:400px;
}
.tscroll2 th, .tscroll2 td{
  min-width:120px;
}
.tscroll2 table{
border:1px solid black;
}
</style>
<div class="tscroll2">
<table>
<tr>
<th>nombre</th>
<th>apellido</th>
<th>edad</th>
<th>telefono</th>
<th>ciudad</th>
<th>direccion</th>
</tr>
<tr>
<td>Raul</td>
<td>Caceres</td>
<td>12</td>
<td>097******</td>
<td>Guadalajara</td>
<td>Talcahuano</td>
</tr>
</table>
</div>

¿Puedo poner botones dentro de un scroll?

Si claro que sí, puedes agregarle cualquier elemento HTML, aunque es preferible que estén fuera de estos. A continuación dejo el ejemplo anterior con un botón.