Mam tabelę zawierającą dane. Dane tabelaryczne. I wygląda tak.

Widziećto skrzypce.

Teraz chciałbym, gdy jest wyświetlany na węższym ekranie, aby tabela wyglądała tak, aby nie uzyskać poziomego paska przewijania i zachować tę samą strukturę wizualną:

(lub jeśli chcesz, jakto skrzypce.)

Teraz moje pytanie brzmi: jak to zrobić? Wolałbym tylko CSS, ale jak dotąd nie udało mi się tego zrobić tylko w CSS. (Drugie skrzypce zawierarowspan atrybuty, które nie mają odpowiedników CSS.)

HTMLjest wygenerowana strona serwera, więc mógłbym wygenerować jeden z dwóch układów w zależności od szerokości okna, ale wtedy nie odpowiedziałby na zmianę rozmiaru okna.

Nie jestem przeciwny niewielkiemu Javascript, ale w tym przypadku, aby przetłumaczyć pierwszą tabelę na drugą w oknie zmiany rozmiaru, trzeba ją rozebrać i odbudować, komórka po komórce, i myślę, że to przesada. Wciąż szukam zapytania o media, które może wykonać całą pracę.

Trochę eksperymentowałem, przyszedłemtak blisko, ale to nie działa w IE8 i IE9.

Czy ktoś ma jakieś pomysły, jak sobie z tym poradzić? Idealne rozwiązanie działałoby na komórki tabeli o różnej wysokości (2 linie tekstu lub więcej) i dowolnej liczbie kolumn.