Удалить пробельные из ячейки таблицы

Question

У меня есть следующая таблица:

<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

И я хочу, чтобы удалить дополнительное пространство рядом с моей кнопки-группе, так что есть небольшая маржа по обе стороны. Каждая кнопка имеет фиксированную ширину, и так же кнопка группы:

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; 
} 

Я уже пробовал использовать margin: 0 и пытается зафиксировать ширину столбца, но не повезло до сих пор.

Answer 1

На вашем столе есть padding:5px; вы должны переписать его следующим образом:

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; 
} 

Убедитесь, что вы поместите этот CSS после CSS бутстраповского! Additonaly удаляет все классы на th (по имени col-md-1). Пространство должно быть удалено следующим образом: https://jsfiddle.net/sebastianbrosch/3obsbh5n/2/

Answer 2

В загрузочном CSS-буфере есть, по-видимому, отступы 5px, привязанные к table-condensed tbody>tr>td. Вы можете переопределить это своим стилем несколькими способами. Простой пример должен был бы добавить класс некоторых td элементов, где вы собираетесь иметь кнопки:

<td class="buttonCell">

И переопределить стиль Bootstrap, используя что-то вроде этого:

.table-condensed tbody>tr>td.buttonCell { padding: 0px; }