JSFiddle - React, Tailwind, and code Playground

by Verdeairo

HTML

<table>
    <tr>
        <th class="rotate"><div><span>Column1</span></div></th>
        <th class="rotate"><div><span>Column2</span></div></th>
        <th class="rotate"><div><span>Column3</span></div></th>
        <th class="rotate"><div><span>Column4</span></div></th>
   </tr>
    <tr>
        <td>RowDisplay1000</td>
        <td>Row12</td>
        <td>Row13</td>
        <td>Row14</td>
   </tr>
    <tr>
        <td>RowDisplay2000</td>
        <td>Row22</td>
        <td>Row23</td>
        <td>Row24</td>
   </tr>

</table>

CSS

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}


th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 7px 10px;
}

table {
    border-collapse: collapse;
    width:100%;
}
table td
/*, #rotated th*/ 
{
    border: 1px solid #ccc;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}