I'm dynamically generating several inline tables (varying in height) and I needs a vertically centered, 270° rotated title to the left of each table. I've tried several combinations of transform, writing-mode, positioning, etc.
I can get the text rotated in the right direction with a combination of writing-mode: vertical-rl; and transform:rotate(180deg); but then positioning becomes a nightmare.
To further confuse matters, it's rendering differently in Firefox vs. Chrome and CodePen vs. SO snippet [below], basically giving me 3 variations. Prefixing (now commented out) didn't seem to make a difference.
I've been staring at this a long time; am I missing something obvious?!
What I want:
What I have:
(The blue lines are container borders, included for comparison.)
//ignore this; It just creates a bunch of duplicates
var els=document.body.getElementsByClassName('cont');
for(n=0;n<10;n++)els[1].insertAdjacentHTML('afterEnd', els[Math.round(Math.random())].cloneNode(1).outerHTML);body { font-family: arial; }
.cont {
display: inline-block;
border: 3px solid blue;
margin: 2px 5px;
}
table {
display: inline-block;
border-collapse: collapse;
}
td {
width: 50px;
height: 50px;
border: 1px solid;
}
.title {
display: inline-block;
font-weight: bold;
text-align: center;
/* -ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl; */
writing-mode: vertical-rl;
/* transform:rotate(180deg); */
}<div class='cont'>
<div class='title'>Title</div>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div class='cont'>
<div class='title'>Title</div>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>