Tabelle mit 90 Grad gedrehten Text anzeigen

  • Hallo Zusammen,


    ich möchte gerne eine HTML Seite aufbauen, die aus 3 Tabellenzeilen besteht


    xxxxxxxxxxxxxxxxx

    xxxx xxxxx zzzzzzz

    xxxxxxxxxxxxxxxxx


    Die x-Werte stehen normal, Z soll um 90 Grad nach rechts gedreht dargestellt werden.


    Meine bisherigen Versuche klappen insofern, dass die Ausrichtiung der Texte klappt, nur leider die Positionierung nicht. Mein gedrehter Text steht ausserhalb der Tabelle (ganz am rechten Rand).


    Daher habe ich 2 Fragen:


    1. Woran liegt es, dass der Text ausserhalb der Tabelle steht?

    2. Funktioniert das auch, wenn ich den o. g. Tabellenblock nach rechts und unten mehrmals kopiere?


    Hier einmal mein HTML-Code bzw. CSS-Datei im Anhang


    Test ist ohne Drehung und T ist mit Drehung.


    Wäre super, wenn mir jemand von Euch hier kurz die Lösung nennen könnte.


    Schönes Wochenende Euch allen und ein besinnliches Weihnachtsfest natürlich auch.


    Gruß


    Volker


    P.S. Der Barcode ist ein EAN-Barcode und bedarf natürlich der entsprechenden Schriftart. Diese habe ich jetzt nicht mit in den Anhang gepackt. Ist aber für mein Problem uninteressant.

  • Jeden Buchstaben in ein Element zu legen ist aber relativ umständlich. Mit writing-mode und text-orientation ginge das auch:

    CSS
    writing-mode: vertical-lr;
    text-orientation: upright;

    Einmal editiert, zuletzt von Arne Drews () aus folgendem Grund: Eigenschaftsbezeichnung korrigiert

  • Ach kuck mal,das man Vertikal schreiben kann wußte ich auch noch nicht. Kannte zwar rtl und ltr aber das ist doch auch was feines. Wieser was dazu gelernt .Ohne jetzt zu goggeln ,,gehe ich mal von aus das man dann bestimmt auch von unten nach oben schreiben kann ,also downright ?.


    Naja wie auch immer ,warten mal was der TE sagt weil sein ganzer Code ist sowieso etwas veraltet und brauch noch eine Grund reiningung

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!