将具有长选项值的select元素调整到表格单元格中

Question

我的问题的例子在这里。 https://jsfiddle.net/f9177pzk/5/。确保你将jsFiddle窗口的宽度扩展到足以使所有3个框都在同一条线上。

我使用的是Bootstrap，但在这种情况下，我会覆盖一些form-control样式以使选择更加苗条。

如您所见，select元素导致其他td元素分成2行。我希望所有td个单元格都适合一行。

在此示例https://jsfiddle.net/f9177pzk/6/中，如果选项值足够短，则select会很好地适合。

有没有办法强制选择适合，同时仍然保持长选项值？

这是我到目前为止尝试过的CSS

select.form-control{
    height: 18px;
    padding: 0px;
    font-size: 12px;
    width: 90%;
}

Answer 1

试试这个：

.ca-info-table tr td:first-child {
  white-space: nowrap;
}