Fijar cabecera de tablas

Fijar la primera fila de una tabla es un requerimiento normal cuando trabajamos con una lista extensa de datos y no queremos que se pierdan los nombres de la columnas, ahora vamos a revisar como con ayuda de estilos y jQuery conseguir el efecto que hemos comentado.

La idea general es poner la tabla dentro de un <div> y por medio de CSS especificar que use scroll ajustando las dimensiones del contenedor y haciendo que las cabecera de la tabla se quede fija dentro del <div>

Definir la propiedad overflow para el div, la propiedad overflow indica que debe hacer el explorador cuando el contenido (en nuestro caso la tabla) sale del área del contenedor (en nuestro caso el <div>). Los valores que puede tomar la propiedad son

visible El contenido no es recortado, puede sobresalir del contenedor

hidden El contenido es recortado, sin barras de scroll para poder ver el resto del contenido

scroll El contenido es recortado, pero el navegador coloca barras de scroll

auto Sólo si el contenido es recortado, el navegador coloca barras de scroll

A continuación tendemos el código con ayuda de CSS y jQuery que nos va a permitir fijar la primera fila de tabla en la mayor parte de los exploradores, entre ellos IE 7, IE 8, FireFox y Google Chrome.



Si deseas hacer las pruebas sin bajar la librería jQuery se puede hacer referencia directamente a la libreria publicada en Google Code de la siguiente manera:

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"

El código jScript es el siguiente:


$(document).ready(function (){
if ($.browser.msie) //si es IE
{
if($.browser.version == '7.0'){
$('.tableContainer').css({'clear':'both','width':'100%','overflow':'scroll','height':'250px'});
$('.tableContainer table').css({'float':'left','width':'98%'});
$('.fixedHeader tr').css({'position':'relative','display':'block'});
};//if browser IE7

if($.browser.version == '8.0'){
$('.tableContainer').css({'clear':'both','width':'100%','overflow':'hidden','height':'250px'});
$('.tableContainer table').css({'float':'left','width':'98%'});
$('.fixedHeader').css({'float':'left','width':'98%'});
$('.scrollContent').css({'float':'left','height':'250px','overflow':'scroll','width':'100%','clear':'left'});
$('.scrollTable th').css({'border':'auto','width':'200px'});
$('.scrollTable td').css({'border':'auto','width':'200px'});
};//if browser IE8
}
else // si es FF o Chrome
{
$('.tableContainer').css({'clear':'both','width':'100%','overflow':'hidden'});
$('.tableContainer table').css({'float':'left','width':'100%'});
$('.fixedHeader tr').css({'position':'relative','display':'block','width':'98%'});
$('.scrollContent').css({'display':'block','height':'250px','overflow':'auto','width':'100%'});
}//if browser

}) //ready

La estructura de la tabla con cada una de sus clases sería

1. un Div que funciona como contenedor
<div id="tableContainer" class="tableContainer">

2. La tabla
<table border="1" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">

3. El área de la cabecera de la tabla
<thead class="fixedHeader">

4. El área del cuerpo de la tabla
<tbody class="scrollContent">


<div id="tableContainer" class="tableContainer">
<table border="1" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5 </td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>

</tbody>
</table>
</div>




Te recomiendo revisar el plugin http://wjama.blogspot.com/2008/04/plugin-fijar-cabecera-de-una-tabla-en.html

6 comentarios:

Anónimo dijo...

Lo probe y funciona perfecto en IE, pero en Firefox 3, las cabeceras se mueven con el scroll, le di un par de vueltas pero no pude fijarlas en FF...¿habra alguna manera? ojala que si, pues el codigo es corto y nada complicado

Anónimo dijo...

Buenas he estado probando este ejemplo y funciona correctamente el IE6 y 7 pero no funciona en Firefox 3, la cabecera se desplaza.
¿Algún consejo?

Muchas gracias.

Anónimo dijo...

no sirve..

Editor dijo...

Ya he actualizado código para que funcione en IE 7,IE 8, Firefox y Google Chrome

Anónimo dijo...

Definitivamente no sirve.

- IE9: Funciona corrigiendo el JS, en la consulta de IE8 y agregando IE9.

- Firefox 3.6: Funciona scroll, pero la cabecera se deforma, voy a seguir echándole mano al CSS.

- Safari 5.1: Idem a Firefox

Para Firefox existe un método más sencillo, pero no funciona en IE; pienso y asumo que es del todo conocido.

Pienso que: ya que el jQuery inyecta CSS a los elementos, lo lógico sería poner todo en el CSS. Evitando de esta manera ensuciar el código y evitar los errores de visualización por JS desactivado en el navegador.

Anónimo dijo...

Excelente!

Con algunas modificaciones mínimas, derivando todas las inyecciones de CSS a un archivo independiente, introduciendo una revisión mínima de compatibilidad con jQuery para el scrolling en el DIV y no en el TBODY para IE7, se resuelve para todas las plataformas habituales. Funciona en Firefox, IE7, 8, 9 y Safari. Ahora a probarlo en dispositivos móviles... y muchas gracias!