¿Cómo se arreglan algunas columnas y algunas desplazables de una tabla?

Estoy desarrollando una página web usando twitter-bootstrap 3 y algunas tablas no se ajustan a los márgenes de mi página. Se desbordan. Por lo tanto, quiero crear una estructura que funcione como una hoja de cálculo de Excel.

Se fijarán las dos columnas más a la izquierda (región azul) y se mostrarán las columnas restantes en la medida de lo posible. Las columnas desbordadas se mostrarán si el usuario desplaza la barra de desplazamiento de la tabla hacia la derecha. Puedes ver la imagen como quiero que sea.

enter image description here Poner la tabla en un div y gobernar el div overflow-x:scroll no es una solución para mí. Porque las dos primeras columnas deben estar visibles todo el tiempo.

Hay una solución aquí. He intentado esto. Funciona solo cuando reduzco la ventana a un valor de ancho menor.

Puedes intentar esto:
Envuelve tu mesa en un div,
Posición absoluta tus primeras 2 columnas, dales algo de ancho (digamos Apx y Bpx ),
Use margin-left:(A+B)px y overflow-x:scroll a la envoltura div

Fiddle: http://jsfiddle.net/ycYdL/

Me parece que podría usar un jquery dataTable junto con el plugin FixedColumns : hace exactamente lo que quiere de forma predeterminada. Simplemente incluya jquery.dataTables.js y jsfixedColumns.min.js (junto con los archivos css) del CDN e inicialice su tabla:

 var table = $('#example').DataTable( { sScrollX: "100%", sScrollXInner: "150%", bScrollCollapse: true }); new $.fn.dataTable.FixedColumns(table); 

ver demo -> http://jsfiddle.net/n2x8W/

dataTables admite bootstrap y puede personalizar la tabla como desee. En el ejemplo, acabo de incluir el CSS predeterminado no tan moderno. Tenga en cuenta que la inicialización expone las características básicas de dataTables como paginación, filtrado, etc. Pueden ser conectadas fácilmente si no las necesita o no las necesita.

También tenga en cuenta que estoy usando la versión 1.9.4, ya que, según mi experiencia, es más estable que 1.10.x.

Lamentablemente no. Necesitará una tabla para la parte fija y una tabla para la parte de desplazamiento.

Para evitar el problema de que las filas ya no tengan la misma altura, considere en realidad duplicar las columnas “fijas” de la tabla original y superponerlas en su área desplazable. Esto se verá visualmente idéntico (siempre que establezca un color de fondo sólido en el área fija), pero se asegurará de que la tabla funcione según lo previsto.

hay ciertas herramientas que pueden ayudarlo con ese problema.

Daría una oportunidad a datatables, ofrecen opciones que hacen exactamente eso, tal vez con algunas variaciones.

échale un vistazo aquí: http://datatables.net/examples/basic_init/scroll_y.html

Podrías colocar la tabla en un div que se ajustaría al tamaño de tu pantalla y luego desbordar automáticamente ese div

Esto se puede hacer, pero no es exactamente sencillo. . .

Básicamente, vas a necesitar crear dos tablas:

  1. Una mesa delgada en el lado izquierdo, que se compone de los encabezados de las filas (es decir, las cosas en azul).

  2. Una segunda tabla, en un div, inmediatamente a la derecha de la primera tabla, que contendrá los campos de datos para las filas. El div necesitaría tener el overflow-x: scroll; estilo unido a ella.

No he hecho esto con desplazamiento horizontal antes, pero lo he hecho con vertical (la fila superior se mantiene, el desplazamiento del rest), y el concepto debería funcionar de la misma manera aquí.

Un par de cosas a tener en cuenta:

  • el CSS para hacer cumplir las alturas de fila coincidentes va a ser MUY importante aquí. . . conseguir que coincida es mucho más complejo con un desplazamiento horizontal, que uno vertical
  • si tiene requisitos de accesibilidad (por ej., soporte de lector de pantalla), tendrá que incluir una “columna de encabezado” oculta en la segunda tabla, que es un duplicado de la estática en la primera tabla, para que el lector de pantalla asociar los encabezados de fila con cada celda de datos.