JSFiddle - React, Tailwind, and code Playground

by dev_null_dweller

HTML

<table border=1 cellspacing=0 cellpadding=0>
    <tr>
        <td>&nbsp;</td>
        <td><div class="v">team name 1</div></td>
        <td><div class="v">team name 2</div></td> 
    </tr>
     <tr>
        <td><div class="h">team name 1</div></td>         
        <td>&nbsp;</td>
        <td>2:0</td>  
    </tr>
     <tr>
        <td><div class="h">team name 2</div></td>         
        <td>0:2</td>
        <td> &nbsp; </td>
    </tr> 
</table>

CSS

td{padding:3px}

JavaScript

$(document).ready(function(){
    $('.v').each(function(i,e){
        var $e = $(e),
            t = $e.text(),
            c = document.createElement('canvas'),
            ctx = c.getContext('2d');
        
        c.width = 400;
        c.height = 18;
        
        ctx.fillText(t,0,18);
        var sizes = ctx.measureText(t);
        c.height = sizes.width; 
        c.width = 18;
        ctx.save();
        ctx.rotate(Math.PI/2);
        ctx.fillText(t,0,0); 
        ctx.restore();
        $e.replaceWith($(c));      
    });
});