Ich habe eine Tabelle mit Daten. Tabellendaten. Und so sieht es aus.

Sehendiese Geige.

Wenn die Tabelle auf einem schmaleren Bildschirm angezeigt wird, möchte ich, dass sie so aussieht, dass Sie keine horizontale Bildlaufleiste erhalten und die gleiche visuelle Struktur beibehalten:

(oder wenn du willst, wiediese Geige.)

Nun ist meine Frage, wie machst du das? Ich würde nur CSS bevorzugen, aber bisher habe ich das nicht nur mit CSS geschafft. (Die zweite Geige enthältrowspan Attribute, die keine CSS-Entsprechungen haben.)

Das HTMList Server-seitig generiert, sodass ich abhängig von der Fensterbreite eines der beiden Layouts generieren könnte, aber dann würde es nicht auf eine Fenstergrößenänderung reagieren.

Ich bin nicht gegen ein bisschen Javascript, aber um in diesem Fall die erste Tabelle in die zweite zu übersetzen, müsste sie Zelle für Zelle auseinandergenommen und neu aufgebaut werden, und ich denke, das ist übertrieben. Ich suche noch nach einer Medienabfrage, die die ganze Arbeit erledigen kann.

Ich experimentierte ein bisschen und kamso nah, aber das funktioniert nicht in IE8 und IE9.

Hat jemand eine Idee, wie er das angehen kann? Die ideale Lösung würde für Tabellenzellen mit unterschiedlicher Höhe (2 Zeilen Text oder mehr) und einer beliebigen Anzahl von Spalten funktionieren.