JSFiddle - React, Tailwind, and code Playground

HTML

<br><br>
<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 */
  white-space: nowrap;
}


th.rotate > div {
  transform: 
    translate(-7px, -2px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
    transform-origin: left bottom;
    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;
}