Fit wählen Element mit langen Option Werte in die Tabellenzelle

Question

Beispiel für mein Problem hier. https://jsfiddle.net/f9177pzk/5/. Stellen Sie sicher, dass Sie die Breite des jsFiddle-Fensters so weit erweitern, dass sich alle 3 Felder in derselben Zeile befinden.

Ich benutze Bootstrap, aber in diesem Fall übertreibe ich einige der form-control Styling, um die Auswahl schlanker zu machen.

Wie Sie sehen können, ist das select-Element bewirkt, dass die anderen td Elemente in zwei Linien brechen. Ich möchte alle td Zellen in eine Zeile passen.

In diesem Beispiel https://jsfiddle.net/f9177pzk/6/ wird die Auswahl passen gut, wenn die Werte der Option kurz genug sind.

Gibt es eine Möglichkeit, die Auswahl zu erzwingen, während die langen Optionswerte beibehalten werden?

Hier ist die CSS ich bisher versucht

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

Answer 1

Try this:

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