Tengo una tabla que contiene datos. Datos tabulados. Y se parece a esto.

Vereste violín.

Ahora, lo que me gustaría es que, cuando se muestre en una pantalla más angosta, la tabla se vea así, para que no obtenga una barra de desplazamiento horizontal y mantenga la misma estructura visual:

(o si quieres, comoeste violín.)

Ahora mi pregunta es, ¿cómo haces eso? Preferiría una forma única de CSS, pero hasta ahora, no he logrado hacerlo solo en CSS. (El segundo violín contienerowspan atributos, que no tienen equivalentes CSS.)

El HTMLes lado del servidor generado, por lo que podría generar uno de los dos diseños dependiendo del ancho de la ventana, pero luego no respondería al cambio de tamaño de la ventana.

No estoy en contra de un poco de Javascript, pero en este caso, para traducir la primera tabla al segundo en un cambio de tamaño de la ventana, debería ser desarmado y reconstruido, celda por celda, y creo que eso es un exceso. Sigo buscando una consulta de medios que pueda hacer todo el trabajo.

Experimentando un poco, vineesta cerca, pero eso no funciona en IE8 y IE9.

Entonces, ¿alguien tiene alguna idea de cómo abordar esto? La solución ideal funcionaría en celdas de tablas de altura variable (2 líneas de texto o más) y cualquier número de columnas.