从文本包装其他列的文本中停止使用100％宽度的HTML表列

Question

我有一个带有三列的HTML表（宽度为100％），宽度为100％。它可以正常工作，但是迫使左右列以文字包含其内容，即使屏幕上有足够的空间未包装。下图说明了我的问题。有足够的空间显示“南美”和第三列的整体，但中间的柱子迫使他们包裹。

这是代码：

<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>

我不想nowrap，而表格：filex并不完美。有一个“适当的”技巧可以做到吗？

Answer 1

使用Flexbox及其状态，以便您可以使用以下代码轻松解决问题，以满足您的要求。

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>