Corregir encabezado y columna de tabla en JavaScript puro-tabla fija

Vista prévia

Descripción

Fixed-Table es un plugin de JavaScript pequeño y muy fácil de usar que hace que el encabezado y la primera columna de tu tabla HTML sean pegajosos en el desplazamiento horizontal y vertical.

Funcionamiento

Incluya la hoja de estilo Fixed-Table. CSS en el encabezado y el archivo JavaScript Fixed-Table. js al final de la página HTML.

<link rel="stylesheet" href="fixed-table.css">
<script src="fixed-table.js"></script>

Envuelva su tabla HTML en un contenedor DIV con la clase CSS de ' Fixed-Table-container '.

<div id="fixed-table-container-demo" class="fixed-table-container">

<table>


<thead>



<tr><th>Name</th><th>Status</th><th>Description</th></tr>


</thead>


<tbody>



<tr><td>Lorem</td><td>Lorem ipsum</td><td>Lorem</td></tr>



<tr><td>Lorem ipsum dolor sit amet</td><td>Lorem</td><td>Dolor</td></tr>



<tr><td>Lorem ipsum dolor</td><td>sit</td><td>Lorem ipsum dolor sit amet ipsum dolor sit amet</td></tr>



<tr><td>Lorem</td><td>Lorem ipsum</td><td>Lorem ipsum dolor sit amet</td></tr>



<tr><td>Dolor sit amet</td><td>Dolor sit amet</td><td>Lorem</td></tr>



<tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor sit amet ipsum dolor sit amet</td><td>Sit amet</td></tr>



<tr><td>Lorem</td><td>Lorem ipsum</td><td>Lorem</td></tr>



<tr><td>Lorem ipsum dolor sit amet</td><td>Lorem</td><td>Dolor</td></tr>



<tr><td>Lorem ipsum dolor</td><td>sit</td><td>Lorem ipsum dolor sit amet</td></tr>



<tr><td>Lorem</td><td>Lorem ipsum</td><td>Lorem dolor sit amet</td></tr>



<tr><td>Dolor sit amet</td><td>Dolor sit amet</td><td>Lorem</td></tr>



<tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor sit</td><td>Sit amet lorem</td></tr>


</tbody>

</table>
</div>

Inicialice la librería y ya terminamos.

var fixedTable = fixTable(document.getElementById('fixed-table-container-demo'));