Hallo

Ich versuche mal grafisch deutlich zu machen, worauf ich hinaus will; gegeben sei folgende Tabelle:
X Y Z
1 2 3
4 5 6
7 8 9
A B C
D E F
G H I

Im HTML-Code würde sie ungefähr so aussehen:

<table>
<tr><th>X</th><th>Y</th><th>Z</th></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
usw.
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>

>   
> Da die Tabelle deutlich höher ist als breit, würde ich nun gerne mit CSS (also ohne den HTML-Code zu ändern) folgende Darstellung erreichen:  
>   
> (zweispaltig)  
> X Y Z    X Y Z  
> 1 2 3    A B C  
> 4 5 6    D E F  
> 7 8 9    G H I  
>   
> (dreispaltig)  
> X Y Z    X Y Z    X Y Z  
> 1 2 3    7 8 9    D E F  
> 4 5 6    A B C    G H I  
>   
> Die Tabelle soll ihre Daten also so darstellen, dass die Breite effizienter genutzt wird, ohne das die logische Struktur (festgelegt im HTML) irgendwie geändert werden müsste.  
>   
> Ich befürchte zwar, dass die Antwort "Absolut nicht machbar" ist, aber vielleicht gibt es ja doch eine Lösung, oder einen Hinweis, der mir weiter hilft.  
  
Mit HTML und CSS alleine ist das nicht machbar. Serverseitig könntest du den HTML-Code so, wie du ihn brauchst, zusammenstöpseln, wenn, ja wenn du die Ausmaße des Browserfensters in Kombination mit der konkret verwendeten Schriftgröße kenntest. Die Daten könntest du mind. einen Request vorher, per JavaScript ermittelt, übergeben.  
  
Dann kannst du das aber auch gleich ganz lokal im Browser in JavaScript erledigen. Platz und Schriftgrößen ermitteln, Inhalte der Tabelle auslesen, neue Tabellen zusammensetzen und in das DOM einbauen.  
  
Allerdings ist, egal, wie du es angehst, eines zu beachten. Die Inhalte in der Tabelle bestehen (vermutlich) aus in Beziehung zueinander stehenden Daten. Diesen Zusammenhang zerreißt du natürlich, wenn du die Daten auf mehrere Tabellen verteilst.  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
  
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)

Meine Herren!

Ich befürchte zwar, dass die Antwort "Absolut nicht machbar" ist

Mir ist keine Methode bekannt, wie das ohne Änderungen am Markup zu bewerkstelligen wäre. Aber von der Machbarkeit mal abgesehen, halte ich den Ansatz auch hinsichtlich User Experience für kontraproduktiv. Bei jeder Teil-Tabelle muss der Benutzer kognitiv neu ansetzen und die Semantik neu erfassen, also zum Beispiel die Kopfzeile der Tabelle erneut lesen.

Hallo Murphy,

die Probleme wurden ja schon beschrieben. Wenn die Tabelle mehrspaltig gestalten möchtest, weil die Überschriften weg scrollen, dann wäre eine Tabelle was für dich, der der der Tabellenkopf nicht mit scrollt. S. hierzu http://forum.de.selfhtml.org/archiv/2013/2/t212882/#m1454603. Meine Testseite.

Gruß, Jürgen

Wie wär es wenn du einfach 3 Tabellen machst.
Bei einem großen Screen stehen diese nebeneinander float: left. Wird der Screen kleiner verlieren die Tabellen ihren float. Zudem werden die Kopfzeilen unsichtbar (display: none) und border bzw. margin Einstellungen müssen so vorgenommen werden, dass es aussieht als sei es eine Tabelle.
Ist Semantisch vielleicht nicht ganz korrekt würde aber am ehesten das treffen was du dir vorstellst.
Die Inhalte kannst du dann natürlich nicht dynamisch verteilen.

Hoffe das ist ein akzeptabler Lösungsansatz.

Gruß
Ehefrau von der Couch schupsender und DFB Pokal guckender
T-Rex