title: Bootstrap: fluid table too wide for window
body: <p>I'm working on a project using twitter bootstrap. We have a table that has lots of columns and is going to be larger than the browser window almost every time.</p>
  
  <p>This is what happens on the right :</p>
  
  <p><img src="https://i.stack.imgur.com/Gkl6i.png" alt="The Problem"></p>
  
  <p>The table border stays in the browser window, while the table contents do not. If I scroll, the borders stay where they are, they do not "follow" the browser window.</p>
  
  <p>You can see the problem <a href="http://jsfiddle.net/qN6L7/1/" rel="noreferrer">on this jsfiddle</a>. It works on Safari, not on Chrome or Firefox.</p>
  
  <p>The layout is like this :</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class='container-fluid'&gt;
      &lt;div class='row-fluid'&gt;
        &lt;div class='span1'&gt;
          ... menusidebar here...
        &lt;/div&gt;
        &lt;div class='span11'&gt;
          &lt;table class="table table-striped table-bordered" style="white-space: nowrap"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I hope you can help me. If you need more information, just ask, I'd be glad to supply. </p>
  
  <p>This is a Rails 3.2 app, using the gem bootstrap-sass in version 2.2.1.1 (the problem appears in 2.2.2.0 too). The first three numbers reflect the bootstrap version.</p>