miércoles, 25 de abril de 2012

Encabezado Fijo ( con jquery )

Anteriormente había escrito un articulo sobre como mantener el encabezado fijo en el un tabla html con css; ahora he encontrado un plugin de jquery que permite hacerlo de forma mas facil:

1. Se descarga de: http://www.tablefixedheader.com/download/
2. Se vincula en la pagina donde esta la tabla que vas a fijar el encabezado: <script src="/js/jquery.fixheadertable.min.js" type="text/javascript"></script>
3.  Se llama al plugin con los siguientes parametros:



$('#miTabla').fixheadertable({
caption : 'Titulo de la tabla',
colratio     : [80, 90, 90, 90], // medidas del ancho de cada columna
resizeCol         : true,  // se puede cambiar el tamaño de la columna
minColWidth : 80 ,
height   : 400,
showhide       : true // esto es para ocultar o mostrar los datos con un clic
});

A petición de un lector:

<table id="miTabla">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>XXX</td>
            <td>YYY</td>
            <td>ZZZ</td>
        </tr>
        <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
    </tbody>
</table>

y listo... encabezado fijo.

1 comentario:

  1. Podeis dar el ejemplo completo con el codigo html, por que no me funciona

    ResponderEliminar