JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Normal table without width: 100%</h2>

<table id="tableA">
    <tr>
        <td>Foo Bar</td>
        <td>Hello World</td>
    </tr>
    <tr>
        <td>Foo Bar</td>
        
        <td>Hello World</td>
    </tr>
</table>
<br/>
<h2>Table with width: 100%</h2>
<table id="tableB">
    <tr>
        <td>Foo Bar</td>
        
        <td>Hello World</td>
    </tr>
    <tr>
        <td>Foo Bar</td>
        <td>Hello World</td>
    </tr>
</table>

<br/>
<h2>Table with width: 100% finishing with dummy TD with width: 100%</h2>
<p>Notice how "Foo Bar" and "Hello World" wraps in this table</p>
<table id="tableC">
    <tr>
        <td>Foo Bar</td>
        <td>Hello World</td>
        
        <td class="spacerTD">&nbsp;</td>
    </tr>
    <tr>
        <td>Foo Bar</td>
        <td>Hello World</td>
        <td class="spacerTD">&nbsp;</td>
    </tr>
</table>

CSS

/* First some table styling so we can see the tables and
illustrating the effect we're after */
table {
    border-spacing: 0px;
}
table td {
    border-bottom:1px solid #C8CDD2;
    padding: 0px 10px;
}
/* The 100% widths */
#tableB, #tableC, td.spacerTD {
    width: 100%;
}