Erzwingt jede Zeile in der Bootstrap-Tabelle als Einzeiler, wenn der Tisch breiter als der Bildschirm ist

Ich baue eine dynamische Tabelle auf, die aus 1-50 Spalten besteht, abhängig davon, was der Benutzer auswählt. Wenn der Benutzer 1-6 Spalten auswählt, gibt es kein Problem, die Daten auf dem Bildschirm anzuzeigen (siehe ex.1 ), aber wenn der Benutzer mehr als 6 Spalten auswählt, versucht die Tabelle, die Ansicht zusammen zu drücken Bildschirm, der dazu führt, dass jede Zeile auf mehrere Zeilen erweitert wird (siehe ex.2 ).

Die Spaltenbreite ist nicht definiert, da sie auch abhängig vom angezeigten Text variiert.

Wie kann ich sicherstellen, dass die Zeile immer ein Einzeiler wie zB 1 ist, egal wie viele Spalten der Benutzer auswählt?

Ich habe diese JSFiddle-Demo mit folgendem Code: