JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<table border="1" cellspacing="0" cellpadding="5">
  <tbody>
    <tr>
      <th scope="col"><span class="rotated">Item 1</span></th>
      <th scope="col"><span class="rotated">Item 2</span></th>
      <th scope="col"><span class="rotated">Item 3</span></th>
      <th scope="col"><span class="rotated">Item 4</span></th>
      <th scope="col"><span class="rotated">Item 555</span></th>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>&nbsp;</td>
      <td>X</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>X</td>
      <td>&nbsp;</td>
      <td>X</td>
      <td>X</td>
    </tr>
  </tbody>
</table>

CSS

body{
  font-family: helvetica;
  font-size: 15px;
}
td{
  text-align: center;
}
th {
  vertical-align: top;
  position: relative;
  height:60px;
  width: 20px;
  background-color: #ccc;
}
th span.rotated {
  transform: rotate(90deg);
  display:block;
  padding: 5px;
  width: 10px;
  position: absolute;
  left: 5px;
  top: 5px;
  line-height:12px;
}