ms-writing-mode tb-rl
OberKnut
- css
- html
Hallo Zusammen, ich habe ein Problem mit der Formatierung eines Tabellenkopfes.
Ich möchte den Head vertikal und gedreht darstellen, sodass die tabelle nicht enorm an Breite gewinnt.
Mit
-ms-writing-mode: bt-rl;
transform:rotate(180deg);
Funktioniert das auch erst einmal ganz gut. Genutzt wird der IE. Nun wird der Text aber OBEN ausgerichtet, und bildet dann entsprechend nach unten zum Rest der tabelle ein eine Lücke.
Ich möchte den Text gerne unten (valign:bottom) ausgerichtet haben, aber ich bekomme es einfach nicht hin.
wenn ich das richtig verstanden habe, müssten der writing mode: BT-RL bedeuten: BOTTOM-to-TOP, RIGHT-to-LEFT Ausgerichtet wird aber immer TOP-to-BOTTOM. Mein CSS:
#vertical { color: #232f3f; font-size: 17px; padding: 10; font-family: Calibri; -ms-writing-mode: bt-rl; transform:rotate(180deg);
}
ursprünglich getestet mit
th { color: #232f3f; font-size: 17px; padding: 10; font-family: Calibri; -ms-writing-mode: bt-rl; transform:rotate(180deg);
}
da ich dann befürchtete, dass der zentrierte TH mir in die Quere kommen könnte, habe ich aus dem HEAD normale TD's gemacht und ein div id="vertical" drumgeschnürt Aber das Ergebnis bleibt. vertical-align, valign, margin-bottom habe ich ebenfalls mit ins CSS aufgenommen, aber ohne Erfolg
Könnt ihr mir sagen, was ich falsch mache ? Ich werd hier Irre :)
Grüße
- Genutzt wird der IE.
- Ich werd hier Irre
Ich habe mal eben Ursache (1.) und Wirkung (2.) zusammensortiert.
-ms-writing-mode
Hersteller-Präfixe haben einen eingebauten Alpha-Status, genau genommen stets auch ein includiertes „deprecated“.
Grundlage für Zitat #2524.
hi und danke für deine Anteilnahme
zunächst einmal möchte ich beiläufig erwähnen, dass ich deine Raketendynamik wirklich erstrebenswert finde. Pädagoge, Programmplaner und jetzt problemdiagnostiker. Ganz großes Kino :D
Du meinst also, dass der blöde olle IE einfach zu oll und doof ist, um die gedrehten Zellen auch noch korrekt auszurichten? Da ich im Arbeitsumfeld tätig bin, und wir Intranetseitens nur den IE zur Verfügung haben, würde dass das Aus bedeuten. Das Aus. DAS AUS. Ich hoffe du bist auch RaketenPsychologe
(:
Ich jebbe ja die Tabellen nicht. Aber wäre:
Nur den ersten Buchstabe in die Zellen eintragen und den ganzen Text als title eine Lösung?
<th title="Montag">M</th>
@@OberKnut
Genutzt wird der IE.
Ein Untoter.
Nun wird der Text aber OBEN ausgerichtet, und bildet dann entsprechend nach unten zum Rest der tabelle ein eine Lücke.
Ich möchte den Text gerne unten (valign:bottom) ausgerichtet haben, aber ich bekomme es einfach nicht hin.
Da die gesamte Box um eine halbe Drehung (bzw. um 180°; kennt der IE die Einheit turn
?) gedreht wird, muss die Ausrichtung (vor der Drehung) nach oben erfolgen.
Jedenfalls in anderen Browsern (Codepen); IE zum Testen habe ich gerade keinen.
ein div id="vertical" drumgeschnürt
“vertical” ist keine sinnvolle ID. Und da evtl. mehrere Kopfzellen vertical beschriftet werden sollen, ist der Einsatz einer ID (die einmalig sein muss!) dafür nicht sinnvoll.
LLAP 🖖
Servus, und dankeschön,
ja das war ein Versuch, da ich's einfach nicht hinbekommen habe auch wenn ich im css (gleich als erstes) align:left/right/mitte/hose eintrage, ändert sich die Position des Textes nicht. Gedreht und "gespiegelt" wird problemlos. nur die Ausrichtung in der Box (th) findet nicht statt :/
Positiv in Firefox
Negativ im Chromium
Fehler:
transform: rotate(0.5turn);
nicht klar. (Die Überschriften "liegen dann auf dem Rücken", also Rotation um 180 Grad.)ich hätte tatsächlich nicht gedacht, dass das ein solches Schauspiel wird 😆
@@Raketentester
Negativ im Chromium
Grmpf, immer diese minderwertigen Browser. Chromia können keine Tabellenzellen drehen?
Note to self: nicht von „in anderen Browsern“ im Plural reden, wenn’s nur ein anderer Browser ist.
LLAP 🖖
Hallo OberKnut,
bei mir funktioniert es in IE11 und Chrome, wenn ich analog zum Beispiel in der MDN ein span um die Inhalte der Überschriften lege. Das erlaubt eine genauere Steuerung von Drehung und Ausrichtung.
Ohne span schreibt Chrome bei mir nicht vertikal. Entweder mache etwas falsch, oder writing-mode für th oder td ist nicht zulässig.
.vertHead th {
border: 1px solid red;
width: 6em;
vertical-align: bottom;
text-align: center;
}
.vertHead th span {
-ms-writing-mode: bt-lr;
writing-mode: vertical-lr;
transform:rotate(180deg)
}
<table>
<thead>
<tr class="vertHead">
<th><span>Klingt interessant</span></th>
<th><span>Ist es aber nicht</span></th>
<th><span>Copacabana</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</tbody>
</table>
Rolf
hi und Danke Rolf, ich probiere das SPAN mal herumzulegen
hi und Danke Rolf, ich probiere das SPAN mal herumzulegen
Mit <span> funktionierts :))))))))))))))))))
Dankeschön !!!