JSFiddle - React, Tailwind, and code Playground

HTML

<p>word-wrap: break-word:</p>
<div class="container">
    <table class="table-break-word">
        <tr>
            <td>1</td>
            <td>Absorbefacient</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Adiathermancy</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Aurantiaceous</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Autothaumaturgist</td>
        </tr>
    </table>    
</div>

<p>word-break: break-all:</p>
<div class="container">
    <table class="table-break-all">
        <tr>
            <td>1</td>
            <td>Absorbefacient</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Adiathermancy</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Aurantiaceous</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Autothaumaturgist</td>
        </tr>
    </table>    
</div>

CSS

.container 
{
    width: 80px;
    border: solid 2px red;
}

.table-break-word 
{
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word; 
}

.table-break-all 
{
    word-break: break-all;
}

td 
{
    border:solid 1px #CCC;
}