Tabla HTML con encabezados fijos y una columna fija

¿Existe una técnica de CSS / JavaScript para mostrar una tabla HTML larga de manera que los encabezados de columna permanezcan fijos en la pantalla y el primer coloumn permanezca fijo y se desplace con los datos?

Quiero poder desplazarme por el contenido de la tabla, pero siempre ser capaz de ver los encabezados de columna en la parte superior y la primera columna a la izquierda.

Si hay un plugin jQuery, ¡sería genial! Si ayuda, el único navegador que me importa es Firefox.

Ejemplo de trabajo del enlace publicado por pranav :

http://jsbin.com/nolanole/1/edit?html,js,output

FYI: Probado en IE 6, 7 y 8 (modo de compatibilidad activado o desactivado), FF 3 y 3.5, Chrome 2. No compatible con el lector de pantalla (los encabezados no forman parte de la tabla de contenido).

EDITAR 5/5/14: movió el ejemplo a jsBin. Esto es viejo, pero sorprendentemente funciona en Chrome actual, IE y Firefox (aunque IE y Firefox pueden requerir algunos ajustes en las alturas de las filas).

El complemento jQuery DataTables es una forma excelente de obtener columnas y encabezados fijos similares a los de Excel.

Tenga en cuenta la sección de ejemplos del sitio y los “extras”.
http://datatables.net/examples/
http://datatables.net/extras/

La sección “Extras” tiene herramientas para columnas fijas y encabezados fijos.

Columnas fijas
http://datatables.net/extras/fixedcolumns/
(Creo que el ejemplo en esta página es el más apropiado para su pregunta).

Encabezado fijo
http://datatables.net/extras/fixedheader/
(Incluye un ejemplo con un diseño de estilo de hoja de cálculo de página completa: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html )

Es posible que esté buscando esto .

Sin embargo, tiene algunos problemas conocidos.

Veo esto, aunque es una vieja pregunta, es un buen lugar para conectar mi propio script:

http://code.google.com/p/js-scroll-table-header/

Simplemente funciona sin configuración y es realmente fácil de configurar.

Si lo que quieres es que los encabezados permanezcan en blanco mientras los datos en la tabla se desplazan verticalmente, debes implementar un

estilo con “overflow-y: auto” como este:

  . . .  . . .  . . . 
Header1

Si el contenido

crece más alto que la altura deseada, comenzará a desplazarse. Sin embargo, los encabezados permanecerán fijos en la parte superior independientemente de la posición de desplazamiento.

En esta respuesta también hay la mejor respuesta que encontré para su pregunta:

Tabla HTML con encabezados fijos?

y basado en CSS puro

He creado algo que tiene encabezado fijo, pie de página fijo, columna izquierda fija y también columna derecha fija. Esto solo funciona bien en IE. Como la mayoría de los usuarios todavía usan IE, esto puede ser útil. Por favor, encuentre el código aquí en la Tabla Desplazable . Por favor déjenme sus sugerencias.

Mientras tanto, estoy trabajando para arreglar columnas en otro navegador. Te mantendré informado. 🙂

  

No del todo perfecto, pero me puso más cerca que algunas de las principales respuestas aquí.

Dos tablas diferentes, una con el encabezado, y la otra, envuelta con un div con el contenido

 
StuffSecond Stuff
//Table

YUI DataTable

No sé si YUI DT tiene esta característica, pero no me sorprendería si lo hiciera.

Sé que puedes hacerlo para MSIE y este ejemplo limitado parece funcionar para Firefox (no estoy seguro de cuán extensible es la técnica).

La primera columna tiene una barra de desplazamiento en la celda justo debajo de los encabezados

 
Header 1 Header 2 Header 3
Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
Hello world Hello world2

¡Aquí hay un buen complemento jQuery, que funciona en todos los navegadores!

Tienes una tabla de cabecera fija sin fijar su ancho.

Verifíquelo: https://github.com/benjaminleouzon/tablefixedheader

Descargo de responsabilidad: soy el autor del complemento.