阻止 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和table-layout: fixed并不完美。 有没有“正确”的技巧来做到这一点？

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>