thead - tablas en javascript ejemplos
¿Cómo puedo dejar que el cuerpo de una tabla se desplace pero mantener su cabeza fija en su lugar? (17)
¿Ha intentado usar thead y tbody, y establecer una altura fija en tbody con overflow: scroll?
¿Cuáles son tus navegadores objetivo?
EDITAR: Funcionó bien (casi) en Firefox - la adición de la barra de desplazamiento vertical provocó la necesidad de una barra de desplazamiento horizontal también - yuck. IE simplemente establece la altura de cada td a lo que he especificado la altura de tbody. Esto es lo mejor que pude hacer:
<html>
<head>
<title>Blah</title>
<style type="text/css">
table { width:300px; }
tbody { height:10em; overflow:scroll;}
td { height:auto; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>One</th><th>Two</th>
</td>
</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
Estoy escribiendo una página donde necesito una tabla HTML para mantener un tamaño establecido. Necesito los encabezados en la parte superior de la tabla para permanecer allí en todo momento, pero también necesito el cuerpo de la tabla para desplazarme sin importar cuántas filas se agreguen a la tabla. Piensa en una mini versión de excel. Esto parece una tarea simple, pero casi todas las soluciones que he encontrado en la web tienen algún inconveniente. ¿Como puedo resolver esto?
Aquí está mi alternativa. También utiliza diferentes DIV para el encabezado, cuerpo y pie de página, pero sincronizados para el cambio de tamaño de la ventana y con la búsqueda, desplazamiento, clasificación, filtrado y posicionamiento:
Haga clic en los botones Jazz, Classical ... para ver las tablas. Está configurado para que sea adecuado incluso si JavaScript está desactivado.
Parece OK en IE, FF y WebKit (Chrome, Safari).
Aquí hay un código que realmente funciona para IE y FF (al menos):
<html>
<head>
<title>Test</title>
<style type="text/css">
table{
width: 400px;
}
tbody {
height: 100px;
overflow: scroll;
}
div {
height: 100px;
width: 400px;
position: relative;
}
tr.alt td {
background-color: #EEEEEE;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
overflow-y: scroll;
overflow-x: hidden;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
</style>
<![endif]-->
</head>
<body>
<div >
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="background: lightgreen;">user</th>
<th style="background: lightgreen;">email</th>
<th style="background: lightgreen;">id</th>
<th style="background: lightgreen;">Y/N</th>
</tr>
</thead>
<tbody align="center">
<!--[if IE]>
<tr>
<td colspan="4">on IE it''s overridden by the header</td>
</tr>
<![endif]-->
<tr>
<td>user 1</td>
<td>[email protected]</td>
<td>1</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 2</td>
<td>[email protected]</td>
<td>2</td>
<td>N</td>
</tr>
<tr>
<td>user 3</td>
<td>[email protected]</td>
<td>3</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 4</td>
<td>[email protected]</td>
<td>4</td>
<td>N</td>
</tr>
<tr>
<td>user 5</td>
<td>[email protected]</td>
<td>5</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 6</td>
<td>[email protected]</td>
<td>6</td>
<td>N</td>
</tr>
<tr>
<td>user 7</td>
<td>[email protected]</td>
<td>7</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 8</td>
<td>[email protected]</td>
<td>8</td>
<td>N</td>
</tr>
</tbody>
</table>
</div>
</body></html>
Cambié el código original para hacerlo más claro y también para ponerlo funcionando bien en IE y también en FF ..
Código original HERE
El problema principal que tuve con las sugerencias anteriores fue poder conectar tablesorter.js Y poder hacer flotar los encabezados de una tabla restringida a un tamaño máximo específico. Eventualmente tropecé con el plugin jQuery.floatThead que proporcionaba los encabezados flotantes y permitía que la ordenación siguiera funcionando.
También tiene una buena página de comparación que se muestra frente a complementos similares .
Encontré DataTables para ser bastante flexible. Si bien su versión predeterminada se basa en jquery, también hay un complemento de AngularJs .
Esta solución funciona en Chrome 35, Firefox 30 e IE 11 (no probó otras versiones)
Su CSS puro: http://jsfiddle.net/ffabreti/d4sope1u/
Todo está configurado para mostrar: bloque, la tabla necesita una altura:
table {
overflow: scroll;
display: block; /*inline-block*/
height: 120px;
}
thead > tr {
position: absolute;
display: block;
padding: 0;
margin: 0;
top: 0;
background-color: gray;
}
tbody > tr:nth-of-type(1) {
margin-top: 16px;
}
tbody tr {
display: block;
}
td, th {
width: 70px;
border-style:solid;
border-width:1px;
border-color:black;
}
Esto me causó grandes dolores de cabeza al tratar de implementar una grilla para una aplicación nuestra. Intenté todas las diversas técnicas pero cada una tenía problemas. Lo más cerca que estaba de usar un plugin de jQuery como Flexigrid (mira en http://www.ajaxrain.com para ver las alternativas), pero esto no parece ser compatible con tablas de 100% de ancho, que es lo que necesitaba.
Lo que terminé haciendo fue hacer lo mío; Firefox admite el desplazamiento de los elementos de tbody para que el navegador olfatee y use el CSS adecuado (ajuste de altura, desbordamiento, etc. ... pregunte si desea más detalles) para hacer ese desplazamiento, y luego para otros navegadores utilicé dos tablas separadas configuradas para usar table-layout: fixed que utiliza un algoritmo de dimensionamiento que se garantiza para no desbordar el tamaño indicado (las tablas normales se expandirán cuando el contenido sea demasiado ancho para caber). Al dar a ambas tablas anchuras idénticas, pude alinear sus columnas. Envolví el segundo en un juego de div para desplazarme y con un poco de macuto con márgenes, etc. logré obtener la apariencia que quería.
Lo siento si esta respuesta suena un poco vaga en algunos lugares; Escribo rápidamente porque no tengo mucho tiempo. ¡Deja un comentario si quieres que amplíe más!
Live JsFiddle
Es posible solo con HTML y CSS
table.scrollTable {
border: 1px solid #963;
width: 718px;
}
thead.fixedHeader {
display: block;
}
thead.fixedHeader tr {
height: 30px;
background: #c96;
}
thead.fixedHeader tr th {
border-right: 1px solid black;
}
tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
}
tbody.scrollContent td {
background: #eee;
border-right: 1px solid black;
height: 25px;
}
tbody.scrollContent tr.alternateRow td {
background: #fff;
}
thead.fixedHeader th {
width: 233px;
}
thead.fixedHeader th:last-child {
width: 251px;
}
tbody.scrollContent td {
width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
Lo hago con javascript (sin biblioteca) y CSS: el cuerpo de la tabla se desplaza con la página y la tabla no tiene que ser de ancho o alto fijos, aunque cada columna debe tener un ancho. También puedes seguir clasificando la funcionalidad.
Básicamente:
En HTML, cree divisiones de contenedor para ubicar la fila de encabezado de la tabla y el cuerpo de la tabla, también cree una div "máscara" para ocultar el cuerpo de la tabla a medida que se desplaza más allá del encabezado
En CSS, convierta las partes de la tabla a bloques
En Javascript, obtenga el ancho de la tabla y haga coincidir el ancho de la máscara ... obtenga el alto del contenido de la página ... mida la posición de desplazamiento ... manipule CSS para establecer la posición de la fila del encabezado de la tabla y la altura de la máscara
Aquí está la javascript y una jsFiddle DEMO.
// get table width and match the mask width
function setMaskWidth() {
if (document.getElementById(''mask'') !==null) {
var tableWidth = document.getElementById(''theTable'').offsetWidth;
// match elements to the table width
document.getElementById(''mask'').style.width = tableWidth + "px";
}
}
function fixTop() {
// get height of page content
function getScrollY() {
var y = 0;
if( typeof ( window.pageYOffset ) == ''number'' ) {
y = window.pageYOffset;
} else if ( document.body && ( document.body.scrollTop) ) {
y = document.body.scrollTop;
} else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
y = document.documentElement.scrollTop;
}
return [y];
}
var y = getScrollY();
var y = y[0];
if (document.getElementById(''mask'') !==null) {
document.getElementById(''mask'').style.height = y + "px" ;
if (document.all && document.querySelector && !document.addEventListener) {
document.styleSheets[1].rules[0].style.top = y + "px" ;
} else {
document.styleSheets[1].cssRules[0].style.top = y + "px" ;
}
}
}
window.onscroll = function() {
setMaskWidth();
fixTop();
}
Lo que necesitas es:
1) tiene un cuerpo de tabla de altura limitada, ya que el desplazamiento solo se produce cuando el contenido es más grande que la ventana desplazable. Sin embargo, tbody no se puede clasificar, y debes mostrarlo como un block para hacerlo:
tbody {
overflow-y: auto;
display: block;
max-height: 10em; // For example
}
2) Volver a sincronizar el ancho de las columnas del cuerpo de la tabla y el cuerpo de la tabla, ya que hacer de este último un block convierte en un elemento no relacionado. La única forma de hacerlo es simular la sincronización aplicando el mismo ancho de columnas a ambos .
Sin embargo, dado que tbody mismo es un block ahora, ya no puede comportarse como una table . Como todavía necesita un comportamiento de table para mostrar sus columnas correctamente, la solución es pedir que cada una de sus filas se muestre como table individuales:
thead {
display: table;
width: 100%; // Fill the containing table
}
tbody tr {
display: table;
width: 100%; // Fill the containing table
}
(Tenga en cuenta que, al utilizar esta técnica, ya no podrá abarcar filas más).
Una vez hecho esto, puede aplicar el ancho de columna para tener el mismo ancho tanto en thead como en tbody . No podrías eso:
- individualmente para cada columna (a través de clases específicas de CSS o estilo en línea), lo cual es bastante tedioso para cada instancia de tabla;
- uniformemente para todas las columnas (hasta
th, td { width: 20%; }si tiene 5 columnas, por ejemplo), que es más práctico (no es necesario establecer el ancho para cada instancia de tabla) pero no puede funcionar para ningún conteo de columnas - uniformemente para cualquier conteo de columnas, a través de un diseño de tabla fijo.
Prefiero la última opción, que requiere agregar:
thead {
table-layout: fixed; // Same layout for all cells
}
tbody tr {
table-layout: fixed; // Same layout for all cells
}
th, td {
width: auto; // Same width for all cells, if table has fixed layout
}
Vea una demostración here , bifurcada de la respuesta a esta pregunta .
Lo siento, no he leído todas las respuestas a su pregunta.
Sí, aquí lo que quieres (ya lo he hecho)
Puede usar dos tablas, con el mismo nombre de clase para un estilo similar, una solo con un encabezado de tabla y otra con sus filas. Ahora ponga esta tabla dentro de un div que tenga altura fija con overflow-y: auto O scroll.
No estoy seguro de si alguien todavía está mirando esto, pero la forma en que lo he hecho anteriormente es usar dos tablas para mostrar la tabla original única: la primera solo la línea de título original de la tabla y sin filas de cuerpo de tabla (o una fila de cuerpo vacío para hacer valida)
El segundo está en un div separado y no tiene título y solo las filas originales del cuerpo de la tabla. El div separado se convierte en desplazable.
La segunda tabla en su div se coloca justo debajo de la primera tabla en el HTML y se ve como una sola tabla con un encabezado fijo y una sección inferior desplazable. Solo he probado esto en Safari, Firefox e IE (últimas versiones de cada uno en la primavera de 2010) pero funcionó en todos ellos.
El único problema que tenía era que la primera tabla no se validaría sin un cuerpo (W3.org validator - XHTML 1.0 strict), y cuando agregué uno sin contenido, causa una fila en blanco. Puede usar CSS para hacer esto no visible, pero aún consume espacio en la página.
Para mí, nada relacionado con el desplazamiento funcionó realmente hasta que eliminé el ancho de la tabla CSS. Originalmente, la tabla CSS se veía así:
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
margin: auto;
width: 100%;
max-width: 800px;
padding:5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
Tan pronto como eliminé el ancho: 100%; todas las funciones de desplazamiento comenzaron a funcionar.
Si está bien usar JavaScript aquí, es mi solución Crear un conjunto de tablas de ancho fijo en todas las columnas (¡píxeles!) ¡Agregue la clase Scrollify a la tabla y añada esta altura de javascript + jquery 1.4.x en css o en estilo!
Probado en: Opera, Chrome, Safari, FF, IE5.5 (Error de script épico ), IE6, IE7, IE8, IE9
//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
$("table.Scrollify").each(function (index, element) {
var header = $(element).children().children().first();
var headerHtml = header.html();
var width = $(element).outerWidth();
var height = parseInt($(element).css("height")) - header.outerHeight();
$(element).height("auto");
header.remove();
var html = "<table style=/"border-collapse: collapse;/" border=/"1/" rules=/"all/" cellspacing=/"0/"><tr>" + headerHtml +
"</tr></table><div style=/"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;/">" +
$(element).parent().html() + "</div>";
$(element).parent().html(html);
});
});
//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
var scr = null;
var inn = null;
var wNoScroll = 0;
var wScroll = 0;
// Outer scrolling div
scr = document.createElement(''div'');
scr.style.position = ''absolute'';
scr.style.top = ''-1000px'';
scr.style.left = ''-1000px'';
scr.style.width = ''100px'';
scr.style.height = ''50px'';
// Start with no scrollbar
scr.style.overflow = ''hidden'';
// Inner content div
inn = document.createElement(''div'');
inn.style.width = ''100%'';
inn.style.height = ''200px'';
// Put the inner div in the scrolling div
scr.appendChild(inn);
// Append the scrolling div to the doc
document.body.appendChild(scr);
// Width of the inner div sans scrollbar
wNoScroll = inn.offsetWidth;
// Add the scrollbar
scr.style.overflow = ''auto'';
// Width of the inner div width scrollbar
wScroll = inn.offsetWidth;
// Remove the scrolling div from the doc
document.body.removeChild(
document.body.lastChild);
// Pixel width of the scroller
return (wNoScroll - wScroll);
}
Editar: altura fija.
Tenía que encontrar la misma respuesta. El mejor ejemplo que encontré es http://www.cssplay.co.uk/menu/tablescroll.html - Encontré que el ejemplo # 2 funcionó bien para mí. Deberá establecer el alto de la tabla interna con Java Script, el resto es CSS.
Vi la excelente solución de Sean Haddy a una pregunta similar y me tomé la libertad de hacer algunas ediciones :
- Use clases en lugar de ID, por lo que una secuencia de comandos jQuery podría reutilizarse para varias tablas en una página
- Se agregó soporte para elementos semánticos de la tabla HTML como caption, thead, tfoot y tbody
- Se hizo la barra de desplazamiento opcional para que no aparezca en las tablas que son "más cortas" que la altura desplazable
- Ancho de div desplazable ajustado para llevar la barra de desplazamiento al borde derecho de la tabla
- Hecho concepto accesible por
- usando aria-hidden = "true" en el encabezado de la tabla estática inyectada
- y dejando el thead original en su lugar, simplemente oculto con jQuery y estableciendo
aria-hidden="false"
- Mostró ejemplos de múltiples tablas con diferentes tamaños
Sin embargo, Sean hizo el trabajo pesado. Gracias a Matt Burland, también, para señalar hay que apoyarlo.
Véalo usted mismo en http://jsfiddle.net/jhfrench/eNP2N/
Editar: Esta es una respuesta muy antigua y está aquí para la prosperidad solo para demostrar que fue respaldada una vez en la década de 2000 pero se cayó porque la estrategia de los navegadores en el 2010 era respetar las especificaciones W3C incluso si se eliminaban algunas características: Tabla desplazable con encabezado fijo / footer fue torpemente especificado antes de HTML5.
Malas noticias
Lamentablemente, no hay una manera elegante de manejar la tabla desplazable con thead / tfoot fijo porque las especificaciones HTML / CSS no son muy claras acerca de esa característica .
Explicaciones
Aunque la especificación HTML 4.01 dice que thead / tfoot / tbody se utilizan (¿se introdujo?) Para desplazarse por el cuerpo de la tabla:
Las filas de la tabla se pueden [...] agrupar utilizando los elementos THEAD, TFOOT y TBODY [...]. Esta división permite a los agentes de usuario admitir el desplazamiento de cuerpos de tabla independientemente de la cabeza y el pie de la tabla.
Pero la función de tabla desplazable de trabajo en FF 3.6 se ha eliminado en FF 3.7 porque se considera un error porque no cumple con las especificaciones de HTML / CSS. Vea this y los comentarios sobre errores FF.
Consejo de la Red de Desarrolladores de Mozilla
A continuación se muestra una versión simplificada de los consejos útiles de MDN para la tabla desplazable
vea esta página archivada o la versión actual en francés
<style type="text/css">
table {
border-spacing: 0; /* workaround */
}
tbody {
height: 4em; /* define the height */
overflow-x: hidden; /* esthetics */
overflow-y: auto; /* allow scrolling cells */
}
td {
border-left: 1px solid blue; /* workaround */
border-bottom: 1px solid blue; /* workaround */
}
</style>
<table>
<thead><tr><th>Header
<tfoot><tr><th>Footer
<tbody>
<tr><td>Cell 1 <tr><td>Cell 2
<tr><td>Cell 3 <tr><td>Cell 4
<tr><td>Cell 5 <tr><td>Cell 6
<tr><td>Cell 7 <tr><td>Cell 8
<tr><td>Cell 9 <tr><td>Cell 10
<tr><td>Cell 11 <tr><td>Cell 12
<tr><td>Cell 13 <tr><td>Cell 14
</tbody>
</table>
Sin embargo, MDN también dice que esto ya no funciona en FF :-(
También he probado en IE8 => la tabla no es desplazable tampoco: - ((