html - 扩展<TD>会使内容换行到下一行

我的问题是TD中的内容将换行到下一行，而不是展开父表。我不明白table停止扩展的极限。

我想要的是防止内容跳到下一行。
问题在这里https://jsfiddle.net/9o1cvbwk/3/描述：


多次按“添加”。
桌子一直扩大到到达屏幕宽度的位置（确定）
再按一次“添加”将使“ V”链接跳到输入按钮（NOK）下方的下一行。
再按一次“添加”将使table扩展到屏幕的限制之外（N​​OK-正确扩展，但不会使“ v”链接滑到下一行）


真的很期待意见。

最佳答案

为了防止“ V”链接跳至下一行，只需将white-space: nowrap添加到td。

white-space定义当浏览器遇到一些空白（空格，制表符等）时该怎么做。如果将其设置为nowrap，则如果空间不足，浏览器将不会包装我们的内容。

当表扩展到边界之外时，由于没有空间，“ V”将折叠到下一行。

在您的CSS中添加：

td {
  white-space: nowrap;
}

JSFiddle：https://jsfiddle.net/66c93hgv/

关于html - 扩展<TD>会使内容换行到下一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39466942/