Cómo crear una tabla HTML con cabecera fija usando sólo CSS

Cuando utilizamos tablas muy grandes en altura y con muchos datos en nuestras páginas puede que nos resulte muy útil este truco del que vamos a hablar.

En este artículo vamos a comentar cómo transformar nuestras viejas y aburridas tablas en otras con cabecera fija y scroll utilizándo únicamente CSS. Muy útil para aquellas tablas que tienen mucha altura ya que nos permiten no perder de vista la cabecera en ningún momento y ahorrar espacio en la página.

El ejemplo

Comenzamos con el ejemplo para que podáis ver el resultado final:

¿Y cómo se hace?

Es bastante sencillo. En primer lugar, necesitaremos incluir los estilos siguientes en la hoja de estilos de nuestra web o en la página donde va la tabla con cabecera fija.

 1 <style type="text/css">
 2 div.fixedHeaderTable {
 3     position: relative;
 4 }
 5 div.fixedHeaderTable table {
 6     width:100%;
 7 }
 8 div.fixedHeaderTable tbody {
 9     height: 200px;
10     overflow-y: auto;
11     overflow-x: hidden;
12 }
13 div.fixedHeaderTable table th {
14     background-color:#CCCCCC;font-weight:bold
15 }
16 div.fixedHeaderTable table td {
17     background-color:#EEEEEE
18 }
19 div.fixedHeaderTable thead td, div.fixedHeaderTable thead th {
20     position:relative;
21 }
22 
23 /* IE7 hacks */
24 div.fixedHeaderTable {
25     *position: relative;
26     *height: 200px;
27     *overflow-y: scroll;
28     *overflow-x: hidden;
29     *padding-right:16px;
30 }
31 
32 div.fixedHeaderTable thead tr {
33     *position: relative;
34     _position: absolute;
35     *top: expression(this.offsetParent.scrollTop-2);
36     *background:none;
37     background-color:#FFFFFF
38 }
39  
40 div.fixedHeaderTable tbody {
41     *height: auto;
42     *position:absolute;
43     *top:50px;   
44 }
45
46 /* IE6 hacks */
47 div.fixedHeaderTable {
48     _width:expression(this.offsetParent.clientWidth-20);
49     _overflow: auto;
50     _overflow-y: scroll;
51     _overflow-x: hidden;
52 }
53 div.fixedHeaderTable thead tr {
54     _position: relative
55 }
56 </style>

El código parece algo complejo. El motivo de esto es que no hay una manera única de hacer esto en todos los navegadores.

• Que funcione en Firefox es extremadamente sencillo, siendo solo necesario utilizar los estilos incluidos entre las líneas 2 y 21 y la tabla tendrá scroll y cabecera fija.
• Internet Explorer 7 tiene su truco, y es necesario añadir otro fragmento de CSS (líneas de la 23 a la 44) e incluir la tabla dentro de un div para que funcione todo.
• Internet Explorer 6 también necesita añadir algunas modificaciones sobre los estilos creados para Internet Explorer 7 (líneas de la 46 a la 55)

En segundo lugar tenemos que modificar ligeramente el código de nuestras tablas. Hay que incluir la cabecera dentro de una sección thead y el resto de la tabla en una sección tbody y después introducir la tabla dentro de un div con clase fixedHeaderTable.

<div class="fixedHeaderTable">
   <table>
      <thead>
      	<tr><th>uno</th><th>dos</th><th>tres</th></tr>
      </thead>
      <tbody>
         <tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
         <tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
         ...
         ...
         ...
         <tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
         <tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
      </tbody>
   </table>       
</div>

Y eso es todo amigos.