JSFiddle - React, Tailwind, and code Playground
HTML
<!--[if LT IE 9]>
<style>
table tr td div {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
left:90px; /*.5 of width - padding*/
top:0;
z-index:1;
zoom:1;
padding:10px;
height:200px; /* ignore padding and set height */
}
</style>
<![endif]-->
<table>
<tr>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
<th>07</th>
<th>08</th>
<th>09</th>
<th>10</th>
<th>11</th>
<th>12</th>
</tr>
<tr>
<td><div>Report Results 1</div></td>
<td><div>Shinanigans</div></td>
<td><div>CSS Transforms Suck</div></td>
<td><div>Lorem Ipsum</div></td>
<td><div>So Damn Pixelated</div></td>
<td><div>This font looks Terrible</div></td>
<td><div>Too Long to read on 1 line Set dimensions suck</div></td>
<td><div>Grumble Grumble.</div></td>
<td><div>Homebrew!</div></td>
<td><div>Spotify Commercial Suck</div></td>
<td><div>Grooveshark FTW!</div></td>
<td><div>Beer time yet?</div></td>
</tr>
</table>
CSS
body { font-family: "Times New Roman", Times, serif; padding:10px; }
td, tr, th, table { border:1px solid #333; }
td {/*o.v.*/position:relative;height:200px;}
td:nth-child(odd) { background:#eee; } /* No IE, No Cares */
td > div {
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg) !important;
transform: rotate(-90deg);
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
background-color:transparent;
/*o.v.*/
position:absolute;
top:0;
left:0;
margin:200px 0 -200px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
width:200px;
}