Tabelle mit 90 Grad gedrehten Text anzeigen

Hallo zusammen, ich möchte gerne eine HTML Seite aufbauen, die aus 3 Tabellenzeilen besteht Die x-Werte stehen normal, Z soll um 90 Grad nach rechts gedreht dargestellt werden. Meine bisherigen Versuche klappen insofern, dass die Ausrichtung der Texte klappt, nur leider die Positionierung nicht. Mein gedrehter Text steht außerhalb der Tabelle (ganz am rechten Rand). Daher habe ich 2 Fragen: 1. Woran liegt es, dass der Text außerhalb 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.

Der hier verwendete Code

<style> p{ text-align:center; margin:0; } table{ margin:0 auto; width:90%; border:1px solid black; } td{ width:30%; padding:10px; height:56px; border:1px solid black; } td:nth-child(2){ width:100px; } .gross{ font-size:30px; } .quer>p{ font-size:20px; line-height:0.95; } </style> <body> <p>heiner xxxx datenbank 3.0</p> <p>bla blub Beschriftung</p> <p>Stand: 16.12.2018 13:08:16</p> <table> <tr> <td colspan="2">Anzeige</td> <td class="quer" rowspan="3"> <p>A</p> <p>r</p> <p>t</p> <p>i</p> <p>k</p> <p>e</p> <p>l</p> <p>n</p> <p>r</p> </td> </tr> <tr> <td>Baureihe</td> <td class="gross">4AKDEPN*jgghbe+</td> </tr> <tr> <td colspan="2">Kurzname</td> </tr> </table> </body>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!