Tabla HTML con desplazamiento horizontal (primera columna fija)

He estado tratando de pensar en una forma de hacer una tabla con una primera columna fija (y el rest de la tabla con un desbordamiento horizontal) Vi una publicación que tenía una pregunta similar. pero el bit de la columna fija no parecía estar resuelto. ¿Ayuda?

Tengo una mesa similar con ese estilo:

Hello, World!
My preformatted content

Qué tal si:

 table { table-layout: fixed; width: 100%; *margin-left: -100px; /*ie7*/ } td, th { vertical-align: top; border-top: 1px solid #ccc; padding: 10px; width: 100px; } .fix { position: absolute; *position: relative; /*ie7*/ margin-left: -100px; width: 100px; } .outer { position: relative; } .inner { overflow-x: scroll; overflow-y: visible; width: 400px; margin-left: 100px; } 
 
Col 1 Col 2 Col 3 Col 4 Col 5
Header A col 1 - A col 2 - A (WITH LONGER CONTENT) col 3 - A col 4 - A col 5 - A
Header B col 1 - B col 2 - B col 3 - B col 4 - B col 5 - B
Header C col 1 - C col 2 - C col 3 - C col 4 - C col 5 - C

Use el complemento jQuery DataTables, admite encabezados y columnas fijos. Este ejemplo agrega soporte de columna fijo a la tabla html “ejemplo”:

http://datatables.net/extensions/fixedcolumns/

Para dos columnas fijas:

http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html

Basado en el enfoque de skube, encontré que el conjunto mínimo de CSS que necesitaba era:

 .horizontal-scroll-except-first-column { width: 100%; overflow: auto; margin-left: 20em; } .horizontal-scroll-except-first-column > table > * > tr > th:first-child, .horizontal-scroll-except-first-column > table > * > tr > td:first-child { position: absolute; width: 20em; margin-left: -20em; } .horizontal-scroll-except-first-column > table > * > tr > th, .horizontal-scroll-except-first-column > table > * > tr > td { /* Without this, if a cell wraps onto two lines, the first column * will look bad, and may need padding. */ white-space: nowrap; } 

con HTML:

 
...

Eche un vistazo a este plugin JQuery:

http://fixedheadertable.com

Agrega desplazamiento vertical (fila de encabezado fijo) u horizontal (primera columna fija) a una tabla HTML existente. Hay una demostración que puede verificar para ambos casos de desplazamiento.