JSFiddle - React, Tailwind, and code Playground

HTML

<table class="thetable" style="border-collapse:collapse;border:1px solid black;">
    <tr>
        <th height="100">
            <span>
                Spalte.1
            </span>
        </th>
        <th>
            <span>
                Spalte.2
            </span>
        </th>
        <th>
            <span>
                Spalte.3
            </span>
        </th>
        <th>
            <span>
                Spalte.4
            </span>
        </th>
    </tr>
    <tr>
        <td>
            A1
        </td>
        <td>
            B1
        </td>
        <td>
            C1
        </td>
        <td>
            D1
        </td>
    </tr>
        <tr>
        <td>
            A2
        </td>
        <td>
            B2
        </td>
        <td>
            C2
        </td>
        <td>
            D2
        </td>
    </tr>
        <tr>
        <td>
            A3
        </td>
        <td>
            B3
        </td>
        <td>
            C3
        </td>
        <td>
            D3
        </td>
    </tr>
</table>

CSS

.thetable td, .thetable th {
        border:1px solid black;
    }

    .thetable td {
        text-align:center;
    }

    .thetable th {

    }

    .thetable th span {
        transform: rotate(270deg);
        -ms-transform: rotate(270deg); /* IE 9 */
        -webkit-transform: rotate(270deg);
        display: block;
        background-color:none;
    }