title: Force each row in Bootstrap table to be a one-liner when table is wider than screen
body: <p>I am building up a dynamic table which consists of 1-50 columns depending what the user selects. When the user selects 1-6 colums there is no problem showing all the data on the screen but when the user selects more than 6 columns the table tries to squeeze the view together on the screen resulting in each row being expanded to multiple lines.</p>
  
  <p>I want it to always show the text in one line as this (OK):
  <a href="https://i.stack.imgur.com/XWAFp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XWAFp.png" alt="OK"></a></p>
  
  <p>But having many columns will wrap the text in to two or more lines (not OK):
  <a href="https://i.stack.imgur.com/F8skR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/F8skR.png" alt="Not OK"></a></p>
  
  <p>The column width is not defined as it also varies depending on the text to show.</p>
  
  <p>How can I make sure the row will always be a one-liner like ex.1 no matter how many columns the user selects?</p>
  
  <p>I have this <a href="http://jsfiddle.net/wNPBp/1/" rel="noreferrer">JSFiddle demo</a> with the code for the two above examples:</p>
  
  <pre><code>&lt;table class='table'&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Column 1&lt;/th&gt;
              &lt;th&gt;Column 2&lt;/th&gt;
              &lt;th&gt;Column 3&lt;/th&gt;
              &lt;th&gt;Column 4&lt;/th&gt;
              &lt;th&gt;Column 5&lt;/th&gt;
              &lt;th&gt;Column 6&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 1&lt;/td&gt;
              &lt;td&gt;Row 11&lt;/td&gt;
              &lt;td&gt;Row 11 1&lt;/td&gt;
              &lt;td&gt;Row 11 11&lt;/td&gt;
              &lt;td&gt;Row 11 11 1&lt;/td&gt;
              &lt;td&gt;Row 11 11 11&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 2&lt;/td&gt;
              &lt;td&gt;Row 22&lt;/td&gt;
              &lt;td&gt;Row 22 2&lt;/td&gt;
              &lt;td&gt;Row 22 22&lt;/td&gt;
              &lt;td&gt;Row 22 22 2&lt;/td&gt;
              &lt;td&gt;Row 22 22 22&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>