ms-writing-mode tb-rl

[Rolf B]

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