JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th><div class="rotate horizSpace">Foo</div></td>
        <th><div class="rotate horizSpace">Bar</div></td>
    </tr>
    <tr>
        <td>10</td>
        <td>20</td>
    </tr>
</table>

CSS

td {border: 1px solid #ccc; padding:5px;}
th {background-color: #666; color: #fff; padding: 5px;}
table { border-collapse: collapse; }
body {font-family: verdana; font-size: 11px; }

.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg); 
  -o-transform: rotate(90deg);
  transform: rotate(90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.horizSpace
{
  padding: 5px 0;    
}
.rotate { filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\9 } /* IE8 and below */
.rotate { filter /*\**/: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\9 } /* IE8 standards mode */
:root .rotate { filter: none; }  /* remove hack in IE9+ */