JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
  <td class="col"><span class="hdr">Test</span></td>
  <td class="col" style="vertical-align: bottom;"><span class="hdr">Test 2</span></td>
  <td class="col"><span class="hdr">ObjektĂĽbersicht</span></td>
  <td class="col"><span class="hdr">Test3</span></td>
  <td class="col" style="text-align: center; width: 50px;" id="foo"></td>
</tr>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
</tr>
</table>


<br />
<br />
<br />
<br />


<a href="http://css3please.com/">CSS3</a>
<a href="http://stackoverflow.com/questions/3167928/drawing-rotated-text-on-a-html5-canvas">SO</a>
<a href="http://stackoverflow.com/questions/24004820/how-can-i-rotate-a-canvas-containing-an-image-by-90-180-270-degrees">90 - 180- 270</a>

CSS

.col
{
    background-color:black;
    #width: 50px;
    #height: 200px;
    #vertical-align: bottom;
}


.hdr
{
    display: inline-block;
    color: white; font-size: bold;
    -moz-transform: rotate(270deg);  /* FF3.5+ */        
    -o-transform: rotate(270deg);  /* Opera 10.5 */   
    -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */              
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  /* IE6,IE7 */          
    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE8 */           
}


.hdr_old
{
   display: inline-block;
   color: white;
   font-weight: bold;
   #width: 30px;
   #transform-origin: 100% 0%;
   #transform-origin: 100% 100%;
   
    #transform: rotate(270deg) translateX(100%);
   -webkit-transform: rotate(270deg);	
   -moz-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   transform: rotate(270deg);
}

JavaScript

(function () {

    var make_rotated_text = function (text)
    {
        var can = document.createElement ('canvas');
        can.width = 10;
        can.height = 10;
        var ctx=can.getContext ("2d");
        ctx.font="20px Verdana";
        var m = ctx.measureText(text);
        can.width = 20;
        // console.log(m); only width
        can.height = m.width;
        
        // Fill the path
        //ctx.fillStyle = "#00FF00";
        ctx.fillStyle = "#000000";
        ctx.fillRect(0,0,can.width, can.height);
        
        
        ctx.font="20px Verdana";
        ctx.fillStyle = "#FFFFFF";
        
        // http://www.w3schools.com/tags/canvas_strokestyle.asp
        ctx.strokeStyle="#FF0000";
        
        
        ctx.beginPath(); // always start a new line with beginPath
        ctx.lineWidth = 3;
        ctx.moveTo( 0, 0 ); // start position
        ctx.lineTo( can.width - 1, 0 );
        ctx.lineTo( can.width - 1, can.height - 1 );
        ctx.lineTo( 0, can.height - 1 );
        ctx.lineTo( 0, 0 );
        ctx.stroke(); // actually draw the line
        
        
        // context.translate(can.width, can.height);
        // context.translate(can.height, can.width);
        // context.translate(0, can.width);
        // context.translate(0, can.height);
        // context.translate(can.height, 0);
        // context.translate(can.width, 0);
        // context.translate(0, 0);
        // context.translate(-can.width, 10);
        // context.translate(0, -can.width);
        // context.translate(can.width/2,can.height/2);
        
        ctx.translate(can.width, can.height);
        
        ctx.rotate(270 * (Math.PI / 180));
        ctx.fillText (text, 0, -2);
        return can;
    };

    var canvas = make_rotated_text ("Hellooooo :D");
    var body = document.getElementsByTagName ('body')[0];
    var foo = document.getElementById("foo");
    foo.appendChild (canvas);
    // body.appendChild (canvas);

}) ();