JSFiddle - React, Tailwind, and code Playground

HTML

<table>
            <tr id="headers">
                <td>Test</td>
                <td>Test 2</td>
                <td>ObjektĂĽbersicht</td>
                <td>Test3</td>
                <td>Veni vidi vici</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            </tr>
        </table>

CSS

td { width: 32px; text-align: center; }
#headers > td {
    position: relative;
    line-height: 32px;
    font-weight: bold;
    color: #fff;
    background: #000;
    white-space: nowrap;
    padding: 0 1ex;
    text-align: center;
    vertical-align: bottom;
}
#headers.rotate > td { width: 32px; max-width: 32px; white-space: normal; padding: 0; }
#headers.rotate > td > div
{
    position: relative;
    display: block;
    width: 32px;
    max-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    overflow: show;
    transform: rotate(-90deg);
}
#headers.rotate > td > div > span
{
    position: absolute;
    left: 1ex;
    display: inline-block;
    white-space: nowrap;
    line-height: 32px;
}

JavaScript

function start() {
    var size = 0;
    var cells = document.querySelectorAll("#headers > td");
    Array.prototype.forEach.call(cells, function(e) {
        var rect = e.getBoundingClientRect();
        size = Math.max( size, rect.width );
        e.innerHTML = "<div class='rot'><span>" + e.textContent + "</span></div>";
    });
    var headers = document.querySelector("#headers");
    headers.style.height = Math.ceil( size ) + "px";
    headers.className = "rotate";
}


start();