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.