title: Table cell with nowrap overflows
body: <p>I'm using bootstrap, and want to create a simple HTML <code>table</code>, where in the last column I have a 2-button group and a single separate button. I want this last cell to always keep this 3 buttons in one line, so I added the <code>text-nowrap</code> bootstrap class (which is a simple <code>white-space: nowrap</code>).</p>
  
  <p>If the content of the other cell(s) is long enough, the content of the last cell will overflow horizontally, and I don't understand why. I'd expect that the rest of the table will shrink to make space for the non-wrapping cell.</p>
  
  <p>Here is a demo to reproduce the issue: <a href="http://www.bootply.com/wWM2a9R8Mt" rel="nofollow">bootply</a></p>
  
  <p>Here is the markup.</p>
  
  <pre><code>&lt;div style="width: 500px"&gt;
    &lt;table class="table table-striped"&gt;
      &lt;tbody&gt;&lt;tr&gt;
        &lt;td&gt;Test text&lt;/td&gt;
        &lt;td class="text-nowrap"&gt;
          &lt;div class="btn-group"&gt;
            &lt;button class="btn btn-default"&gt;&lt;span&gt;A&lt;/span&gt;&lt;/button&gt;
            &lt;button class="btn btn-warning"&gt;&lt;span&gt;B&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-success"&gt;&lt;span&gt;C&lt;/span&gt;&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;&lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The button group <code>div</code> and the separate <code>button</code> are all <code>inline-block</code> elements, so the wrapping should work as expected IMO. What am I doing wrong?</p>
  
  <p>Maybe this is not strictly related to bootstrap.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <ul>
  <li>I've updated the bootply, the link was a previous version, sorry</li>
  <li>Tested in latest Chrome and IE, the issue is almost the same in both.</li>
  </ul>
  
  <p><strong>The cause and the workaround</strong></p>
  
  <ul>
  <li>I've realized that unwrapping the two buttons from the <code>btn-group</code> will result a correct layout, so I started to examine what actually the <code>btn-group</code> does.</li>
  <li>I've found that the <code>btn</code>s in the <code>btn-group</code> are floated, and this floating causes the bad layout. <del>Adding a <code>clearfix</code> class to the <code>btn-group</code> solves the issue.</del> No it actually doesn't, still researching...</li>
  <li>I will examine why the <code>float: left</code> is needed for bootstrap, it seems like the buttons in the group could be aligned by using purely <code>inline-block</code> without margin. I will check this in the <code>v4-alpha</code> code, and will also report this issue to bootstrap <code>v3</code>.</li>
  </ul>