JSFiddle - React, Tailwind, and code Playground

by blowsie

HTML

<table border='1'>
      <tr>
         <td class='rotated_cell'>
            <div class='rotate_text'>Test1</div>
         </td>
         <td class='rotated_cell'>
            <div class='rotate_text'>TEST2</div>
         </td>
         <td class='rotated_cell'>
            <div class='rotate_text'>WOOOOOOOOOOOOOOOOHOOOOOO</div>
         </td>
      </tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
   </table>

CSS

.rotate_text
      {
         -moz-transform:rotate(-90deg); 
         -moz-transform-origin: top left;
         -webkit-transform: rotate(-90deg);
         -webkit-transform-origin: top left;
         -o-transform: rotate(-90deg);
         -o-transform-origin:  top left;
          position:relative;
         top:20px;
      }
     {
         border: 1px solid black;
         table-layout: fixed;
         width: 69px; /*Table width must be set or it wont resize the cells*/
      }
      th, td 
      {
          border: 1px solid black;
          width: 23px;
      }
      .rotated_cell
      {
         height:300px;
         vertical-align:bottom
      }

JavaScript

var a = [1,2,3];

$.each(a, function(k,v){
    $("body").append("<span>"  + v + ",</span>")
})