¿Cómo conseguir tablas al estilo Excel solo con CSS y con CSS y jQuery?

PLAN A: Solución CSS

La solución CSS solo tiene lugar si los anchos de las columnas de la tabla tienen una dimensión fija y siempre será así. En caso contrario, hay que aplicar el plan B (con jQuery).

Para poder conseguirlo, debemos dividir la tabla haciendo buen uso de THEAD, TBODY y TFOOT (en caso de ser necesario). Yo no lo voya usar, por simplificar esto, pero el método a aplicar es exactamente el mismo. Aunque, expresamente indico que solo tendría sectido aplicarlo si se requieren especificar la sumatorias de totales, promedios, etc. Pero que sean valores que dependan de las columnas de contenido. Porque de otro modo, es más fácil aplicar una solución fuera de la tabla. Bueno, sin más preámbulos, paso a indicar la estructura de la tabla:

Screen shot 2011-04-24 at 11.40.46

Hay que fijarse que he aplicado la misma clase para los TH del THEAD que para los TD del TBODY. Lo importante es que los anchos de las columnas sean los mismos tanto en el THEAD como en TBODY de la tabla.

Para poder llevara acabo el scroll, haremos servir algo bastante lógico en CSS: el overflow. Hay que tener en cuenta que para poder aplicar esta propiedad, el contenedor sujeto debe de ser un bloque (display:block). He aquí el motivo de los problemas con las columnas que no tengan un ancho definido, dado que las mismas las distribuye el mismo navegado dinámicamente en función del espacio que debe ocupar la tabla y la celda.

Repito: Hay que tener en cuenta que en efecto esta solución no tiene sentido si se aplican tablas con ancho 100% o que hayan celda(s) sin ancho definido.

PLAN B: Solución CSS + jQuery

Bueno, primero, preguntarse por qué no solo con CSS. Pues, básicamente porque CSS resuelve buena parte del problema. Sin embargo, para poder aplicar un THEAD fijo, debemos modificar el objeto de tal modo, que el THEAD con sus repsectivos TH pierde la referencia de los anchos proporcionados por los valores de los TBODY>TD. Siempre y cuando estos valores no hayan sido especificados por CSS.

Indico la estructura de la tabla y estilos básicos, teniendo en cuenta que la estructura es casi idéntica a la del Plan A, con la diferencia de que las columnas no tendrán un tamaño definido.

Screen shot 2011-04-24 at 11.25.03

Screen shot 2011-04-24 at 11.23.08

Con esta base, veríamos que el scroll funciona correctamente, pero algo sucede con el THEAD. Al definir su propiedad display:block, perdemos la referencia de anchos del TBODY que dinámicamente han quedado dispuestos por el navegador, en función de la cantidad de texto ocupado por la celda, ancho de la tabla y ancho de las celdas, si existe alguno definido.

En pocas palabras, todo funciona a excepción de la disposición de elementos del THEAD. Así pues la solución al caso sería sencilla: Aplicar los mismos anchos que tengan los TD del TBODY a los TH del THEAD. Hay que tener en cuenta que no es posible aplicarla con estilos CSS. Porque necesitamos conocer cuál ha sido el ancho que dinámicamente se le ha asginado a cada celda el navegador. Lo que depende de muchos factores, todos ellos girando alrededor de si la tabla tiene un ancho definido al 100%, no tiene ancho definido o tienen sus celdas algunos anchos definidos.

Uso jQuery para poder :

Screen shot 2011-04-24 at 11.54.01

Y en efecto, esto debería funcionar, si no fuera porque en el ejemplo, no he aplicado el reset de estilos CSS, con el que no habría margin ni paddings deginidos en el objeto tabla. Así pues, esto planteado tal cual, sin reset, falla. Pero, ¿por qué? Porque el margin y el padding en el método width() de jQuery no se incluye.

Podríamos usar este otro método outerWidth() que jQuery nos provée en versiones posteriores a la 1.2. El cuál sí nos devuelve el ancho del objeto tenienedo en cuenta el padding y el margin que haya definido.

Screen shot 2011-04-24 at 12.01.20

Hay que tener cuidado con los paddings y borders. Son los mayores causantes de problemas.

Dejar un comentario

*