vertical table headers

restrictions: - chrome only; - no linebreaks in verticaltext - no (max-)height

by Laurens Maneschijn

HTML

<pre>Example table with vertical headers.

Will auto-grow in height for longer lines.
Allows rotate-left-90' and rotate-right-90'.

Restrictions: chrome only, no linebreaks, no (max-)height.</pre>

<hr>

<table class="verticalheaders1" border=1>
	<thead>
		<tr>
			<th>
				<div class="verticalbox">
					aaaa bbbb cccc
					1111 2222
				</div>
			</th>
			<th>
				<div class="verticalbox">
					aaaa bbbb cccc
          <br>
          <!-- note that the line below after the linebreak shows up outside the cell: -->
					1111 2222
				</div>
			</th>
			<th>
				<div class="verticalbox">
					short
				</div>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>
	</tbody>
</table>

<hr>

<table class="verticalheaders2" border=1>
	<thead>
		<tr>
			<th>
				<div class="verticalbox">
					aaaa bbbb cccc
					1111 2222
				</div>
			</th>
			<th>
				<div class="verticalbox">
					aaaa bbbb cccc
          <br>
          <!-- note that the line below after the linebreak shows up outside the cell: -->
					1111 2222
				</div>
			</th>
			<th>
				<div class="verticalbox">
					short
				</div>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>
	</tbody>
</table>

CSS

/*
This works, but only in chrome.

This construction only works for 1 line of code.
if there is a linebreak inside .verticalbox (or it has a (max-)height) then the next line will be outside the box.
*/

/* rotated right 90 degrees:*/
.verticalheaders1 td,
.verticalheaders1 th{
	vertical-align: top;
}
.verticalheaders1 td .verticalbox,
.verticalheaders1 th .verticalbox{
	-webkit-writing-mode: vertical-rl;
	white-space: nowrap;
	width: 1em;
	text-align: left!important;
}

/* same, but now rotated left 90 degrees:*/
.verticalheaders2 td,
.verticalheaders2 th{
	vertical-align: bottom;
}
.verticalheaders2 td .verticalbox,
.verticalheaders2 th .verticalbox{
	-webkit-writing-mode: vertical-rl;
	-webkit-transform: rotate(180deg);
	white-space: nowrap;
	width: 1em;
	text-align: left!important;
}


.box{
	display:inline-block;
	border:1px solid #f00;
}
.box                                    {border-color:#f00;}
.box > .box                             {border-color:#0f0;}
.box > .box > .box                      {border-color:#00f;}
.box > .box > .box > .box               {border-color:#f00;}
.box > .box > .box > .box > .box        {border-color:#0f0;}
.box > .box > .box > .box > .box > .box {border-color:#00f;}