JSFiddle - React, Tailwind, and code Playground

HTML

<table style="table-layout:fixed;">
    <thead>
        <tr>
            <th>Left</th>
            <th>Center</th>
            <th>Right</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td class="overflowcell"><span class="overflowtext">SomeVeryBigTextThatDoesNotFit</span></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

table, td{
    border:1px solid black;
}

table{
    width:100%;
    border-collapse: collapse;
    table-layout:fixed;
}

td{
    color:red;
    text-align: center;
}

JavaScript

$(function() {
    var textWidth = $(".overflowtext").width();
    var tdWidth = $(".overflowcell").width();
    $(".overflowtext").css("margin-left", tdWidth/2 - textWidth/2);
});