title: Remove white space from table cell
body: <p>I have the following table: </p>
  
  <pre><code>&lt;table&gt;
      ...
    &lt;td&gt;
      &lt;div class="btn-group btn-group-sm"&gt;
          &lt;button class="btn btn-info mini"&gt;&lt;span class="glyphicon glyphicon-duplicate"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;button class="btn btn-default mini"&gt;09:00&lt;/button&gt;
          &lt;button class="btn btn-default mini"&gt;09:30&lt;/button&gt;
          &lt;button class="btn btn-default mini"&gt;10:00&lt;/button&gt;
          &lt;button class="btn btn-default mini"&gt;10:30&lt;/button&gt;
          &lt;button class="btn btn-default mini"&gt;11:00&lt;/button&gt;
          &lt;button class="btn btn-default btn-block chev down"&gt;&lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/BravoZulu/k2e7gLrh/3/" rel="nofollow">jsfiddle</a></p>
  
  <p>And I want to remove the extra space next to my button-group so that there's little margin on either side. Each button has a fixed width and so does the button group:</p>
  
  <p>CSS:</p>
  
  <pre><code>.btn-group {
    width: 117px;
  }
  
  .btn-group-sm &gt; .btn.mini {
    padding: 5px 3px;
    width: 40px;
  }
  
  .btn-group &gt; .btn.mini:first-child:not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
  }
  
   .btn-group &gt; .btn.mini:first-child {
    margin-left: -1px;
  }
  
  .btn-group-sm&gt;.btn.mini,
  .btn.chev {
    border-radius: 0px;
  }
  
  .btn.chev {
    width: 118px;
  }
  </code></pre>
  
  <p>I've already tried using <code>margin: 0</code> and trying to fix the column width, but with no luck so far.</p>