Vertical text

dabblet.css

/*
   Vertical text
   by @kizmarh
*/
.vertical-text {
	display: inline-block;
	overflow: hidden;
	width: 1.5em;
}
.vertical-text__inner {
	display: inline-block;
	white-space: nowrap;
	line-height: 1.5;
	transform: translate(0,100%) rotate(-90deg);
	transform-origin: 0 0;
}
/* This element stretches the parent to be square
   by using the mechanics of vertical margins  */
.vertical-text__inner:after {
	content: "";
	display: block;
	margin: -1.5em 0 100%;
}

.blue {
	background-color:blue
}

/* Just for more pretty example */
body {	
	font: 20px/1.5 Arial, sans-serif;
}

table {
	margin-top: 2em;
	
th,td {
	mrder: 0;1px solid	text-align:center;
	font-weight: normal;
}

	padding: 0.5em;

dabblet.html

<table>
<tr>
	<th></th>
	<td><div class="vertical-text"><div class="vertical-text__inner">1969</div></div></td>
	<td><div class="vertical-text"><div class="vertical-text__inner">1970</div></div></td></tr>
<tr>
	<th>Something</th>
	<td class="blue">&nbsp;</td>
	<td class="blue">&nbsp;</td>
</tr>
<tr>
	<th>Something else</th>
	<td>12</td>
	<td>12314</td>
</tr>
</table>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}