在文本换行之前使td扩展到最大宽度

Question

我觉得这是一种简单的方法，但我无法想到/找到解决方案......

我有一个<table>，如果它溢出（它应该是预期的话），它应该滚动x。<td>元素设置为max-width: 300px。我希望<td>中的文本仅在<td>达到最大宽度后才会换行。现在，只要<table>不适合其父<div>，文字就会换行。

如何在文本换行前将<td>展开到最大宽度？

这是一个小提琴：https://jsfiddle.net/ds99unpz/2/

编辑：澄清......

如果td不必是300px宽，以便将文字放在一行上，我不希望它是300px。如果文本太长而无法放入300px td，那么我希望td为300px宽并包含文本。

Answer 1

我updated your JSFiddle。它强制表格和单元格分别表现为block和inline-block。然后使用一点white-space: nowrap;魔法并强制table溢出，我们得到了所需的结果。但是，细胞的高度并不相同。