title: Group addon taking up too much space in bootstrap table
body: <p>When I add a <code>.group-addon</code> to an element inside a bootstrap <code>.table</code>, all other elements are not given enough space, and the group-addon input takes up far too much room.</p>
  
  <pre><code>&lt;h2&gt;Only one bully, group-addon&lt;/h2&gt;
  
  &lt;table class="table"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input id="cool" class="form-control"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input id="cool" class="form-control"&gt;
                      &lt;div class="input-group-addon"&gt;x&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;pushed around...&lt;/td&gt;
              &lt;td&gt;being bullied...&lt;/td&gt;
              &lt;td&gt;by group addons...&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;h2&gt;Two bullying group-addons&lt;/h2&gt; 
  &lt;table class="table"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div class="input-group"&gt;
                      &lt;div class="input-group-addon"&gt;x&lt;/div&gt;
                      &lt;input id="cool" class="form-control"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input id="cool" class="form-control"&gt;
                      &lt;div class="input-group-addon"&gt;x&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;pushed around...&lt;/td&gt;
              &lt;td&gt;being bullied...&lt;/td&gt;
              &lt;td&gt;by group addons...&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;h2&gt;No Bullies&lt;/h2&gt;
  
  &lt;table class="table"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input id="cool" class="form-control"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input id="cool" class="form-control"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;pushed around...&lt;/td&gt;
              &lt;td&gt;being bullied...&lt;/td&gt;
              &lt;td&gt;by group addons...&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div class="alert alert-info"&gt;When there is no group-addon inside a table with class table, the spacing looks reasonable, but a single group-addon ruins it all&lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/tzUKX.jpg" alt="group-addon"></p>
  
  <h2><a href="http://jsfiddle.net/billymoon/ntm2q/" rel="nofollow noreferrer">http://jsfiddle.net/billymoon/ntm2q/</a></h2>
  
  <p>How should I use group-addons inside bootstrap tables without them taking too much space?</p>