¿Cómo desplazarse “tbody” de la tabla independientemente de “thead”?

Como se especifica aquí :

Las filas de la tabla se pueden agrupar en un encabezado de tabla, pie de tabla y una o más secciones de cuerpo de tabla, utilizando los elementos THEAD, TFOOT y TBODY, respectivamente. 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.

Creé el siguiente ejemplo , pero no funciona.

HTML:

Problem Solution

JS:

 $(function() { for (var i = 0; i < 20; i++) { var a = Math.floor(10 * Math.random()); var b = Math.floor(10 * Math.random()); var row = $("").append($("").html(a + " + " + b + " =")) .append($("").html(a + b)); $("tbody").append(row); } }); 

CSS:

 table { background-color: #aaa; } tbody { background-color: #ddd; height: 100px; overflow: auto; } td { padding: 3px 10px; } 

La parte faltante es:

 thead, tbody { display: block; } 

Manifestación

Vi esta publicación hace aproximadamente un mes cuando tuve problemas similares. Necesitaba el desplazamiento del eje y para una tabla dentro de un diálogo de ui (sí, me escuchaste bien). Tuve suerte, porque una solución de trabajo se presentó con bastante rapidez. Sin embargo, no pasó mucho tiempo antes de que la solución adquiriera vida propia, pero más sobre eso más adelante.

El problema con solo configurar los elementos de nivel superior (thead, tfoot y tbody) para mostrar el bloque, es que la sincronización del navegador de los tamaños de columna entre los diversos componentes se pierde rápidamente y todo se empaqueta en el tamaño más pequeño permitido. Establecer el ancho de las columnas parece ser el mejor curso de acción, pero sin establecer el ancho de todos los componentes de la tabla interna para que coincida con el total de estas columnas, incluso con un diseño de tabla fijo, hay una ligera divergencia entre los encabezados y el cuerpo cuando una barra de desplazamiento está presente.

La solución para mí era establecer todos los anchos, verificar si una barra de desplazamiento estaba presente, y luego tomar los anchos escalados que el navegador había decidido y copiarlos en el encabezado y pie de página ajustando el ancho de la última columna para el tamaño del barra de desplazamiento. Hacer esto proporciona cierta fluidez a los anchos de columna. Si se producen cambios en el ancho de la tabla, la mayoría de los navegadores principales escalarán automáticamente los anchos de columna tbody según corresponda. Lo único que queda es establecer los anchos de las columnas de encabezado y pie de página de sus respectivos tamaños de cuerpo.

 $table.find("> thead,> tfoot").find("> tr:first-child") .each(function(i,e) { $(e).children().each(function(i,e) { if (i != column_scaled_widths.length - 1) { $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width())); } else { $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth()); } }); }); 

Este violín ilustra estas nociones: http://jsfiddle.net/borgboyone/gbkbhngq/ .

Tenga en cuenta que una envoltura de tabla o tablas adicionales no son necesarias solo para el desplazamiento del eje y. (El desplazamiento en el eje X requiere una tabla de ajuste). Sin embargo, la sincronización entre los tamaños de columna para el cuerpo y el encabezado se perderá si se encuentra el tamaño mínimo del paquete para las columnas de encabezado o cuerpo. Se debe proporcionar un mecanismo para anchuras mínimas si el redimensionamiento es una opción o se esperan anchos de tabla pequeños.

La culminación final de este punto de partida se realiza completamente aquí: http://borgboyone.github.io/jquery-ui-table/

A.

prueba esto.

 table { background-color: #aaa; } tbody { background-color: #ddd; height: 100px; overflow-y: scroll; position: absolute; } td { padding: 3px 10px; color: green; width: 100px; } 
 thead { position: fixed; height: 10px; /* This is whatever height you want */ } tbody { position: fixed; margin-top: 10px; /* This has to match the height of thead */ height: 300px; /* This is whatever height you want */ } 

partes obligatorias:

 tbody { overflow-y: scroll; (could be: 'overflow: scroll' for the two axes) display: block; with: xxx (a number or 100%) } thead { display: inline-block; }