Text 90° drehen und unten ausrichten

Volker S. · 6. Dezember 2016

Hallo liebe Formumsmitglieder,
wie bekomme ich es denn am besten hin, dass ein Text um 90° gedreht, unten ausgerichtet wird?
Es handelt sich dabei um eine Tabelle, deren Kopfzeilen auf diese Art dargestellt werden sollen.
So wie ich das erkennen kann, wird erst das Textfeld gerendert und danach der Text reingequetscht.
Versuche das mit Höhe und Breite hinzubekommen scheiterten bisher kläglich.

Vielleicht kann mir ja jemand einen Tipp geben.

Hier die CSS-Anweisung:

CSS

.header-sk {  vertical-align: middle;
    text-align: left;
    word-break: break-word;
    font-weight: 500;
    border: 1px solid #aaa;
    font-size: 0.8em;
    height: 75px;
    width: 175px;
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg); }

Alles anzeigen

Und ein Screenshot der aktuellen Situation.

Volker S. · 6. Dezember 2016

Hallo,
habs selbst rausgefunden.
Hab in die TableCells ein Label eingefügt und das dann ausgerichtet.
Weiß zwar nicht, ob das die Lösung ist, aber es funktioniert.
Wen es interessiert, hier die CSS-Anweisung:

CSS

.header-label {
    writing-mode: vertical-rl;
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    vertical-align: middle;
    text-align: left;
    font-weight: 500;
    word-break: break-word;
    height: inherit;
    width: inherit;
}
 
.header-td {
    border-collapse: collapse;
    vertical-align: bottom;
    text-align: center;
    font-weight: 500;
    border: 1px solid #aaa;
    font-size: 0.8em;
    width: 35px;
    height: 150px;
    padding: 5px;
}

Alles anzeigen

... und hier das Ergebnis:

Text 90° drehen und unten ausrichten

Jetzt mitmachen!

Teilen