Tabla con header fijo y scroll (horizontal y vertical)

[hammett]

Hola, sucede que tengo el siguiente problema, complicado para mi que no tengo mucha experiencia con CSS. Lo que quiero hacer es una tabla que muestre una cantidad grande de datos pero que mantenga su header fijo y que además permita su control con un scroll vertical y horizonrtal.

Intente modificar la versión de imaputz (http://www.imaputz.com/cssStuff/bigFourVersion.html#), logrando mostrar el scroll horizontal del div y el vertical del tbody. Ahora lo que quisiera es poder mover el scroll vertical del tbody fuera del div colocarlo en algún lugar donde sea más visible.

Aqui esta el código:

Código:

<style type="text/css">
/* begin some basic styling here */
body {
	background: #FFF;
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px;
	padding: 0
}

table, td, a {
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
/* end basic styling */

/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 400px;
	overflow-x: auto; 
	overflow-y: hidden;
	width: 756px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	width: 756px
}

/* define width of table. IE browsers only */
div.tableContainer table {
	float: left;
	width: 740px
}

/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers.                              */
html>body div.tableContainer table {
	width: 756px
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
	position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
	display: compact;
}

/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
	display: compact; /**/
	height: 262px;
	overflow-x: hidden;
	overflow-y: auto;
	direction:rtl;
	width: 100%;
	direction:ltr;
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}
</style>

En algunas etiquetas le coloque display: compact; porque así me permitio usar rowspan y colspan en la cabecera.

Y aqui esta el HTML:

Código HTML:

<div id="tableContainer" class="tableContainer">
  <table border="1" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
    <thead class="fixedHeader">
      <tr>
        <th rowspan='3'>Municipios</th>
        <th colspan='7'>Cabecera</th>
        <th colspan='7'>Centro poblado</th>
        <th colspan='7'>Rural Disperso</th>
        <th rowspan='2'>TOTAL</th>
      </tr>
      <tr>
        <th colspan='1'>Nivel 1</th>
        <th colspan='1'>Nivel 2</th>
        <th colspan='1'>Nivel 3</th>
        <th colspan='1'>Nivel 4</th>
        <th colspan='1'>Nivel 5</th>
        <th colspan='1'>Nivel 6</th>
        <th colspan='1'>Subtotal</th>
        <th colspan='1'>Nivel 1</th>
        <th colspan='1'>Nivel 2</th>
        <th colspan='1'>Nivel 3</th>
        <th colspan='1'>Nivel 4</th>
        <th colspan='1'>Nivel 5</th>
        <th colspan='1'>Nivel 6</th>
        <th colspan='1'>Subtotal</th>
        <th colspan='1'>Nivel 1</th>
        <th colspan='1'>Nivel 2</th>
        <th colspan='1'>Nivel 3</th>
        <th colspan='1'>Nivel 4</th>
        <th colspan='1'>Nivel 5</th>
        <th colspan='1'>Nivel 6</th>
        <th colspan='1'>Subtotal</th>
      </tr>
      <tr>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
        <th>Pers</th>
      </tr>
    </thead>
    <tbody class="scrollContent">
      <tr>
        <td>Pasto</td>
        <td> 79.735 </td>
        <td> 72.090 </td>
        <td> ... </td>
      </tr>
      <tr> ... </tr>
    </tbody>
  </table>
</div> 

Bueno y otro problemita es que esta vaina solo funciona para Firefox (porqué así fué el requerimiento, pero si me pueden decir como arreglarlo para IE todo bien).

Bueno gracias y todo bien hermanos.

[hammett]

Bueno por suerte el cliente quedo satisfecho con la solución que presentamos, o sea que no se mira el scroll vertical. Pero ahí me queda la duda, si logro solucionarlo ya les contare. Bueno chao...

[axz]

No sé bien si sea lo que buscas, pero reciéntemente webosiris respondió algo similar, date una vuelta por acá a ver si es lo que buscas...

Suerte y bienvenido al foro

[hammett]

Oe, axz, estoy revisando el post y hay dos soluciones una con CSS pero que no permite el scroll horizontal y la que me parece que esta muy buena es la que maneja JavaScript, voy a probar con esa que no la habia visto. Oye muchas gracias la informacion que me brindas pinta buena, chao...

[axz]

Perfecto, en cuanto al scroll horizontal, lo puedes lograr metiendo tu tabla dentro de un div con ancho fijo y asignándo la propiedad CSS overflow-x: scroll;

Saludos

[mgusdl]

Buenas!

La verdad que me he peleado a lo largo de los tiempos con este problema y aún no he encontrado una solución.
La cosa es que según los estándares W3C esto debería funcionar así (tal y como pasa en FF); mezclaré css con html para no andar mirando en 2 sitios:

Código HTML:

<table>
  <thead style="font-weight:bold;">
    <tr>
      <th>cabeza 1</th>
      <th>cabeza 2</th>
      <th>cabeza 3</th>
      <th>cabeza 4</th>
    </tr>
  </thead>
  <tbody style="height:200px; overflow:auto;">
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr><tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr><tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr><tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr><tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr><tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr><tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr><tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr><tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
  </tbody>
</table> 

Como siempre, la tocada de webs viene de la mano de la implementación en Internet Exporer, que el alto especificado para tbody lo aplica a cada fila.

Las soluciones encontradas pasan por rizar el rizo con javascript y no siempre funcionan de la forma deseada (como pasa en el ejemplo del enlace arriba mencionado por axz).

Hasta ahora la única "solución" que he encontrado es una biblioteca que usa AJAX para llenar un datagrid, pero sigue siendo matar moscas a cañonazos.
Aqui teneis la URI: http://dhtmlx.com/docs/products/dhtmlxGrid/index.shtml
(no enlazo porque no me deja)

[aguschirico]

Querido Hammett, te comento que tu problema es que en IE(6 y 7 por el momento) el elemento <tbody></tbody> no soporta el atributo "overflow".

[lccado]

y IE 8 tampoco... lo soporta... esta gente de M$ no entiende...