Stop HTML Table Column with 100% Width from Text Wrapping Other Columns Unnecessarily

Question

I have an HTML table (with 100% width) with three columns, the middle one with 100% width. It works fine, but it forces the left and right columns to text-wrap their contents, even if there is enough space on the screen to show them un-wrapped. The image below illustrates my problem. There is enough space to show "South America" and the third column whole, but the middle column forces them to wrap.

Here is the code:

<table style="width: 100%;" border="1">
<tr>
    <td>South America</td>
    <td style="width: 100%;">Green Beans</td>
    <td>$25,000 per kg</td>
</tr>
</table>

I don't want to nowrap, and table-layout: fixed is not perfect. Is there a "proper" trick to do this?

Answer 1

Use the Flexbox and its states so you can easily solve your problem using the below code to fulfill your requirement.

table {
    width: 100%;
}

tr {
    display: flex;
}

tr td {
    width: 100%;
}

<table border="1">
    <tr>
        <td>South America</td>
        <td>Green Beans</td>
        <td>$25,000 per kg</td>
    </tr>
</table>