Regreso a lo básico: tablas con scroll y encabezado fijo en puro Css 13.1.13
Soluciones puro css para tablas con scroll y encabezado y pie fijos. Explicación.
Regreso a lo básico: tablas con scroll y encabezado fijo en puro Css
Esta es una cuestión resuelta hace mucho, mucho tiempo. Sin embargo no está de más recuperar de vez en cuando realizaciones veteranas y plénamente funcionales para quienes se incorporan.
Así que aquí van unos ejemplos de tablas con el encabezado fijo (siempre visible) al hacer scroll en el cuerpo (tbody) de la tabla.
Ejemplos a desechar
Si me permites, antes de las soluciones válidas, déjame decirte que descarto otras pese a que su técnica esté muy extendida e incluso se vea recomendada.
Me estoy refiriendo a aquellos planteamiento que se basan en "romper la tabla". Esto es, sacar el encabezado de la tabla a la que pertenece, ya sea creando dos tablas o cualquier otro elemento conteniendo los datos del thead más la tabla sin thead.
Sea como sea, se rompe la naturaleza y semántica de los datos en pos de la estética (apariencia) o de una funcionalidad: scrool y una fila permanente.
Artículo complementario
Bastante después de publicar este artículo he publicado otras formas más sencillas y fáciles de adaptar a cada circunstancia.
Responsive table con scroll en el Tbody y encabezado fijo en puro Css
From table to tabs pure Css Incluye 2 demos
Tablas puras con scroll y encabezado fijo
Stu Nicholls en CSSPlay
Esta realización de @stucssplay en CSSPlay incluye dos ejemplos distintos, y añade la particularidad de que además de tener el encabezado fijo (siempre visible) al hacer scroll en la tabla, el pie de tabla (tfoot) también lo es.
Si te fijas en la primera tabla, hay dos div´s anidados que contienen a la tabla.
<div class="outer">
<div class="innera">
<table
El div exterior (".outer") tiene un padding en superior e inferior que es donde se coloca el thead y el tfoot
El segundo div (".innera") es el que tiene declarado la altura y el scroll en auto. Es éste el que realiza el desplazamiento.
Y como es lógico, tanto el segundo div (".innera") como la tabla deben tener position: static Para que el encabezado y el pie de la tabla tomen como referente el primer div (".outer") que está como relative.
La segunda tabla tiene un marcado ligeramente diferente:
<table>
<caption>ARRIVALS</caption>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>
<tr>
<td colspan="5">
<div class="innerb">
<table class="tabletwo">
<tbody>
datos que hacen scroll
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Como ves, dentro de la tabla hay un div (".innerb") que contiene una segunda tabla con los datos. Es este div el que al tener una altura declarada y overflow: auto el que hace el scroll.
imaputz.com
En imaputz.com tienes esta realización. Muy, muy, muy veterana. Fíjate qué navegadores y versiones referencia al hablar de su compatibilidad.
En el ejemplo tienes un enlace a otra tabla con encabezado fijo y scroll más compleja (en cuanto a los elementos que integra dentro de ella).
En este ejemplo tenemos una tabla pura, sin marcado o elementos añadidos como en los dos ejemplos anteriores. Así que la pregunta es: ¿cómo funciona?.
Pues al igual que ocurría en Futurama. ¿Recuerdas?:
Fry: Maldita sea, tendremos que arreglar el motor nosotros mismos.
Leela: ¡No podemos, imbécil! Nadie sabe cómo funciona. ¡Es imposible!
Cubert: Nada es imposible. Ahora entiendo cómo funcionan los motores. Se me ocurrió en un sueño (y lo olvidó en otro). Los motores no mueven la nave. La nave se queda quieta y los motores mueven el universo a su alrededor.
Bender: Eso es una mierda enorme.
Cubert: Nada es una mierda enorme. No si puedes imaginarlo. Eso es lo que significa ser un "jugón de Css".
Al igual que en Futurama, en esta realización no es sobre el thead sobre el que actúan los motores (o el Css, que viene a ser lo mismo). Es sobre el tbody. Y tan sencillo como:
tbody.scrollContent {
display: block; /*obligado*/
height: 262px; /*la que necesites*/
overflow: auto; /*obligado*/
width: 100%;
}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Wao, yo siempre use plugin Jquery para resolver este problema... gracias por la publicación, muy buena.
ResponderEliminarExcelente blog, de los pocos muy buenos que he encontrado en castellano!
ResponderEliminarAprovecho aparte de darte las gracias por este blog, ponerte una pregunta: porque sera este error de http://jsfiddle.net/relu902/pQ8Ee/ ? (el tbody se "mete" el la primera td que encuentra, en vez de ocupar el ancho que sí lo coge thead y tfoot? Gracias!!
Gracias Teodor.
ResponderEliminarVamos con los deberes que me has puesto xD
Las tablas (y sus hijos: celdas, filas...) tienen por defecto en la propiedad display valores asociados a ellas (table, table-cell...) y son un poco "especialitos".
Si te fijaste en el último ejemplo del artículo, se cambia el valor de display para que el scroll y demás propiedades no sean ignoradas.
Un poco lo mismo debes hacer en el ejemplo que enlazas. En ese caso prueba a declarar en th, td { display: inline-block; }
Posíblemente tengas que declarar alguna anchura a la tabla o a sus hijos y ajustarlas para que no haya descuadres.
Un saludo
Gracias por tu respuesta (rápida!) !
ResponderEliminarAlgo se mejora, pero ya no se corresponden las anchuras de los th y td dentro de thead y tfoot, con las td dentro del tbody:
http://phpfacil.webcindario.com/problemas/tabla_encabezado_fijo/
(no me fiaba mucho de jsFiddle..)
He probado varias formas, incluso aplicar display:inline-block al th, pero nada, no soy capaz.
Tendré que renunciar al encabezado fijo, ya que no quiero hacer uso de js o jquery. Estuviese muy bien hacerlo solo con CSS.
Un saludo
Teodor si te fijas tus intentos es exactamente el último ejemplo del artículo, el de imaputz.com.
ResponderEliminarLa única diferencia es que tú añades un pie de tabla también visible siempre.
Creo que no es demasiado complicado añadirle al ejemplo ese pie y en el css duplicar las propiedades de todo lo referente a thead para el tfoot y su contenido.
Modificado en firebug para hacer la captura de imagen:
Ver imagen
Un saludo
Excelente. Sin embargo en IE9 no me va
ResponderEliminarGenialísimo, Pude implementar tablas con scroll, perooo, cuando la implemento
ResponderEliminarlos td, se desalinean con los th??? por qué pasa esto?
Saludos.
Lo hice pero las celdas se desalinean con los encabezados :(
ResponderEliminarpostdata: excelente comparación entre el css y futurama.
No estoy colaborando con ninguna solución a los planteos que vienen haciendo por los descalabros de las celdas al contenerlas en una caja de bloque, pero me parece que hace falta una aclaración para que no se repitan hasta el fin de los tiempos.
ResponderEliminarSi el autor del blog me lo permite, aprovecho para insistir en lo que ya se dijo varias veces : esto es experimental. Y me parece que quienes presentan quejas lo quieren usar en una página real. En verdad no es que no se pueda, pero ... ¿le dieron una mirada a los códigos en vez de copiar y pegar?.
El de imaputz es harto elocuente; la cantidad de ajustes que hubo (y aún hoy hay) que hacerle es enorme, y para que se adapte a nuestro diseño debemos entenderlo primero y después reescribirlo. A modo de ejemplo para un caso típico -y de difícil solución- tenemos el tamaño de la scrollbar. No sabemos cuánto le ponen el navegador, el tema o el ususario final. Allí en el código hay un cálculo a ojímetro de 16 pixeles, totalmente arbitrario, y que sólo puede ser corregido del lado cliente leyendo ese "grosor" con un escript (*).
La versión de cssplay le da una vuelta de compromiso para zafar del problema : separa la barra unos cuantos pixeles "de más" para asegurase de que no quede descuadrada. Claro, hay que ver si nuestro propio diseño se adapta a una scrollbar que en verdad esté visualmente afuera de la tabla.
Insisto, todo esto sería como ejemplo. No son las únicas "licencias" que nos deberíamos tomar para usarlo en en una página industrial. El valor de estos trabajos es el ingenio, la inventiva para ir resolviendo falencias del CSS usando el mismo CSS.
::::::::
(*) Ahora quizá con 'calc()', restando el ancho disponible del ancho total, pero nunca lo probé.
Gracias Furoya por una explicación tan detallada.
EliminarComo seguramente habrás notado me puede la pereza en aquellos comentarios que se limitan a hacer una afirmación del tipo "no me funciona" y más aún en los que esconden una petición de código "a medida" sin adjuntar una descripción clara y un enlace a los códigos del consultante.
Ya sabes aquello de coge mis códigos/ideas del blog. Son libres y gratuitos. Pero si tu tiempo o/y dedicación para exponer tu problema es escaso o mínimo el mío lo será más.
Un saludo
Hola... yo tengo un problema un poco mas complicado. Tengo una pagina con publicación de reportes con gráficas y tablas, las cuales suben a mi carpeta fuente múltiples usuarios. Para ahorrar tiempo les di licencia de subir los reportes en archivo web desde excel.
ResponderEliminarEl problema es que algunos archivos son muy extensos y ahora no se como podría dejar fijos los títulos de deportes y la tabla de esos archivos ya convertidos.
Sera que tengo que diseñarles una tabla con gráficos y un sistema de actualización que puedan modificar?, pido tu consejo.
De antemano te agradezco mucho....
Este tipo de realizaciones requieren de reajustes en función de las particularidades de cada tabla. Hay que tener en cuenta multitud de variables para que el resultado final luzca perfecto.
EliminarAjustes que si no se domina lo suficiente css o se desconocen los valores finales de esas variables hacen prácticamente imposible lograrlo.
Así que quizás en tu caso (por la diversidad en la variaciones de las tablas finales más los gráficos) deberías plantearte otras vías y técnicas. Como por ejemplo hacer que los encabezados y pies (captions, thead, tfoot) no sean tales elementos de la tabla si no hijos directo de un contenedor padre de todo ello y posicionados y que sólo se desplace toda la tabla de datos.
Pero Griselda, lo dicho mil veces antes a otros que a ti: sin códigos no hay código. Al adivino se lo cargaron con un ere y el becario aún no pilló los poderes adivinatorios.
Un saludo
disculpe, necesito que me ayude en algo que realmente estoy buscando, tengo una pagina web en wordpress, pero quiero crear la parte donde se utilizan los titulos, es como una tabla, pero tiene titulos o contenidos de entrada y al lado tiene, visto(es decir la gente que lo ve, aparecen las veces que la gente ve esa entrada, y yo realmente no se como se llama ese plugin o si es alguna otra cosa, porfa necesito que me ayude, se lo agradezco
ResponderEliminarOye Peter, ¿esto no será una broma de cámara oculta por casualidad?
EliminarVeamos:
Vienes pidiendo algo que no tiene nada que ver con el post.
A más quieres un plugin para WP y lo pides en un blog hecho en Blogger en el que no hay ni una sola entrada dedicada a tu CMS.
Los milagros los hacen dos blogs más allá a la derecha según sales.
Así que sólo te puedo ayudar recomendándote la lectura de este artículo.
Un saludo.