扩展会导致内容换行到下一行

Question

我的问题是TD内的内容将换行到下一行而不是扩展父表。我无法理解table停止扩张的限制是什么。

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

• 多次按“添加”。
• 表格不断扩大到达屏幕宽度的点（OK）
• 再次按“添加”将导致“V”链接跳转到输入按钮（NOK）正下方的下一行
• 再次按“添加”将导致table扩展超出屏幕限制（NOK - 正确展开但没有'v'链接滑动到下一行）

真的很期待意见。

Answer 1

防止＆＃34; V＆＃34;链接跳转到下一行，只需将white-space: nowrap添加到td。

white-space定义了当浏览器遇到某些空格（空格，制表符等）时要做什么。如果我们将其设置为nowrap，如果没有空间，浏览器将不会包装我们的内容。

当桌子超出界限时，＆＃34; V＆＃34;正在崩溃到下一行，因为没有空间。

在你的CSS中添加：

td {
  white-space: nowrap;
}

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