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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>