JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<table>
    <tr>
        <td>
            short string
        </td>
        <td>
            <table><tr><td>
somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata
                </td></tr></table>    
        </td>
        <td>
            short string
        </td>
    </tr>
</table>
</div>

CSS

div {
    width: 80%;
    background-color: darkgray;
    padding: 15px;
    margin: 10px auto;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}

td
{
    margin: 0;
    padding: 0;
}

table table 
{
    width: 100%;
    table-layout: fixed;
}
table table td
{
    width: 100%;
    border: solid 1px red;
    margin: 0px;
    padding: 0px;
    word-wrap:break-word;
}