title: How can I force a Bootstrap table to resize wider than its parent container?
body: <p>I am creating a spreadsheet-like application using a Bootstrap table. A user can toggle column visibility, add/delete columns, resize, etc.</p>
  
  <p>I need the table to be able to scroll horizontally when a user chooses to resize a column, as well as add new ones, but Bootstrap tries to fit the table into the parent container. A basic Bootstrap table:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
   &lt;table id="grid" class="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;One&lt;/th&gt;
          &lt;th&gt;Two&lt;/th&gt;
          &lt;th&gt;Three&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Data&lt;/td&gt;
        &lt;td&gt;Data&lt;/td&gt;
        &lt;td&gt;Data&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the code to resize (credit to user686605 on SO):</p>
  
  <pre><code>$(function() {
   var pressed = false;
   var start = undefined;
   var startX, startWidth;
  
  $("#grid").on('mousedown', 'th', function(e) {
      start = $(this);
      pressed = true;
      startX = e.pageX;
      startWidth = $(start).width();
      $(start).addClass("resizing");
    });
  
    $(document).mousemove(function(e) {
      if ( pressed ) {
        $(start).width(startWidth+(e.pageX-startX));
      }
    });
  
    $(document).mouseup(function(e) {
      if ( pressed ) {
        pressed = false;
      }
    });
  });
  </code></pre>
  
  <p>Demo in this fiddle: <a href="https://jsfiddle.net/xc0v6gkk/1/" rel="nofollow">https://jsfiddle.net/xc0v6gkk/1/</a></p>
  
  <p>On resizing, you can see the table headers that are not being resized becoming smaller to fit the increasing width of the resized column. Is there a way that I can force those columns to stay the same width, and force the table to grow wider than its parent, revealing a horizontal scrollbar in the process?</p>
  
  <p>When you add enough columns, the table will exceed the boundaries of its parent, but resizing is no longer possible.</p>
  
  <p>I have tried to check widths on resize and increase the div when the table reaches a certain width, but you still aren't able to keep dragging the column further horizontally as the div's width increases:</p>
  
  <pre><code>$(document).mousemove(function(e) {
    if (pressed) {
      $(start).width(startWidth + (e.pageX - startX));
  
      var docWidth = $('.wrapper').width(),
        gridWidth = $('#grid').width();
  
      if (docWidth - gridWidth == 15) {
        $('.wrapper').width(docWidth + 100);
      }
    }
  });
  </code></pre>
  
  <p>EDIT</p>
  
  <p>I think it's important for me to know why the resizing stops working when the table starts to overflow. The resizing process is kind of finicky, but it's something that can be tweaked. I just can't understand why the resizing stops working when the table overflows.</p>