Remove white space from table cell - html

Question

I have the following table:
<table>
...
<td>
<div class="btn-group btn-group-sm">
<button class="btn btn-info mini"><span class="glyphicon glyphicon-duplicate"></span></button>
<button class="btn btn-default mini">09:00</button>
<button class="btn btn-default mini">09:30</button>
<button class="btn btn-default mini">10:00</button>
<button class="btn btn-default mini">10:30</button>
<button class="btn btn-default mini">11:00</button>
<button class="btn btn-default btn-block chev down"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</td>
jsfiddle
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:
CSS:
.btn-group {
width: 117px;
}
.btn-group-sm > .btn.mini {
padding: 5px 3px;
width: 40px;
}
.btn-group > .btn.mini:first-child:not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn.mini:first-child {
margin-left: -1px;
}
.btn-group-sm>.btn.mini,
.btn.chev {
border-radius: 0px;
}
.btn.chev {
width: 118px;
}
I've already tried using margin: 0 and trying to fix the column width, but with no luck so far.

Answer 1

On your table there is a padding:5px; you have to overwrite it with the following:
table.table {
width: auto;
margin:0 auto;
}
/** only for the head of the table. */
table.table thead th {
padding:0;
}
/** only for the body of the table. */
table.table tbody td {
padding:0;
}
Make sure you place this CSS after the CSS of Bootstrap! Additonaly remove all classes on the th (named col-md-1). The space should be removed like this example: https://jsfiddle.net/sebastianbrosch/3obsbh5n/2/

Answer 2

There appears to be a padding of 5px tied to table-condensed tbody>tr>td in the Bootstrap CSS. You can override this with your own style is several ways. A simple example would be to add a class to some td elements where you are going to have buttons:
<td class="buttonCell">
And override the Bootstrap style by using something like this:
.table-condensed tbody>tr>td.buttonCell {
padding: 0px;
}