Desplazamiento de tabla de JavaScript
-
Use la propiedad
overflowen JavaScript para desplazar la tabla -
Use
overflowXyoverflowYen JavaScript para desplazarse por la tabla
Para el desarrollo web y la utilización de los espacios de una página web, el contenido desplazable o div o tabla pueden contribuir activamente. Una sección desplazable puede guardar fácilmente una gran cantidad de líneas y puede rediseñar la página web.
Nuestros conjuntos de ejemplos demostrarán el uso de las propiedades overflow: "auto" y overflowX, overflowY. Estas propiedades requieren menos líneas de código para implementar contenido de tabla desplazable.
Use la propiedad overflow en JavaScript para desplazar la tabla
La estructura básica de la tabla proporciona una gran lista de datos. Iniciaremos una tabla desplazable para minimizar el espacio y utilizar áreas de página.
Estableceremos la propiedad de instancia tbody overflow en auto. Automáticamente aparecerá un navegador que se mueve vertical y horizontalmente.
Código - Archivo HTML:
<table id="myTable">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody id="bd">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Código - Archivo CSS:
thead,
tbody {
display: block;
}
tbody {
max-height: 100px;
width: 200px;
}
Código - Archivo JavaScript:
document.getElementById('bd').style.overflow = 'auto';
Producción:
Use overflowX y overflowY en JavaScript para desplazarse por la tabla
Este ejemplo implica una forma casi similar de realizar la tarea de hacer una tabla desplazable. La diferencia es que definimos el eje de navegación de forma explícita.
Pondremos el overflowX en none y overflowY en auto.
Código - Archivo HTML:
<table id="myTable">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody id="bd">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Código - Archivo CSS:
thead,
tbody {
display: block;
}
tbody {
max-height: 100px;
width: 200px;
}
Código - Archivo JavaScript:
document.getElementById('bd').style.overflowX = 'none';
document.getElementById('bd').style.overflowX = 'auto';
Producción:
