Encabezado fijo
Actualizacion.... evitense todo esto con:
http://www.tablefixedheader.com/
Se me presento un problema en el trabajo, tenia una tabla con muchos registros, pero no queria usar paginacion, ademas de esto sobre los 20 registros ya no me acordaba que significaba cada columna porque el encabezado se perdia; asi que me di en la tarea de buscar como mantener el encabezado fijo de una tabla html y el contenido movil, algo asi como esto: http://www.cssplay.co.uk/menu/tablescroll.html el truco esta en jugar con los tbody, thead, div y css
La receta es:
1. Crea el encabezado en una tabla, tienes que usar la recomendacion html stric, es decir algo como:
<table class="tabla_encabezado" border="1">
<caption>Titulo de mi tabla</caption>
<thead>
<tr>
<th class="th1"> Columna 1</th>
<th class="th2"> Columna 2 </th>
<th class="th3"> Columna 3</th>
</tr>
</thead>
</table>
http://www.tablefixedheader.com/
Se me presento un problema en el trabajo, tenia una tabla con muchos registros, pero no queria usar paginacion, ademas de esto sobre los 20 registros ya no me acordaba que significaba cada columna porque el encabezado se perdia; asi que me di en la tarea de buscar como mantener el encabezado fijo de una tabla html y el contenido movil, algo asi como esto: http://www.cssplay.co.uk/menu/tablescroll.html el truco esta en jugar con los tbody, thead, div y css
La receta es:
1. Crea el encabezado en una tabla, tienes que usar la recomendacion html stric, es decir algo como:
<table class="tabla_encabezado" border="1">
<caption>Titulo de mi tabla</caption>
<thead>
<tr>
<th class="th1"> Columna 1</th>
<th class="th2"> Columna 2 </th>
<th class="th3"> Columna 3</th>
</tr>
</thead>
</table>
Es necesario que cada columna apunte a un class diferente, después en el archivo .css de la pagina, se definirá el ancho de cada columna por medio de clases.
2. Debajo de la tabla creada anteriormente, crea otra tabla, pero esta ves solamente tendrá tbody, y un solo campo con el colspan igual al numero de columnas de la tabla anterior, algo como:
<table>
<tbody>
<tr>
<td colspan="10">
<div class="div_interna">
<table class="tabla_interna">
<tr >
<td class="td1"> Dato 1</td>
<td class="td2"> Dato 2</td>
<td class="td3"> Dato 3</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Aquí en realidad hicimos una tabla (tabla_interna) dentro de una celda de otra tabla, y esa tabla interna rodeada por un div (div_interna), que es el que nos permitirá movernos por esa tabla sin mover la pagina; para eso hay una propiedad en css.
3. Por ultimo, creamos el CSS, la mayor parte del truco esta en este archivo, aquí siempre se hará referencia a las clases que especificamos en las tablas anteriores.
.tabla_encabezado{
border-collapse: collapse;
border: 1px solid #666666;
font: normal 11px verdana, arial, helvetica, sans-serif;
text-align: left;
word-wrap: break-word;
}
.div_interna{
height:350px;
overflow:auto; // Aquí esta el truco de poder mover la tabla sin mover el encabezado
margin:0 auto;
}
.tabla_interna{
border-collapse: collapse;
border: 1px solid #666666;
font: normal 11px verdana, arial, helvetica, sans-serif;
text-align: left;
word-wrap: break-word;
}
.th1 {width:80px;word-wrap: break-word; }
.th2 {width:80px;word-wrap: break-word; }
.th3 {width:80px;word-wrap: break-word; }
.td1 {width:80px;word-wrap: break-word; }
.td2 {width:80px;word-wrap: break-word; }
.td3 {width:80px;word-wrap: break-word; }
Recuerda que tanto el ancho del encabezado como el ancho de los datos deben ser iguales, pueden cambiar cuando colocas padding o bordes a las tablas
Comentarios
Publicar un comentario