Esta página utiliza 'XHTML 1.0 Transitional' válido Esta página utiliza CSS válido
Búsqueda personalizada

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:

unodostres
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc
aaaabbbbcccc

¿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.

Fecha de publicación: 17/04/2009
Etiquetas: css , html
Prohibida la reproducción total o parcial de los textos o imágenes aquí expuestos salvo autorización expresa y por escrito del autor de los mismos. © 2007-2017 Locualo v1.0. Política de privacidad [www.locualo.net]