html - 从表格单元格中删除空格

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

在你的 table 上有一个 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 放在 Bootstrap 的 CSS 之后!另外删除 th 上的所有类(名为 col-md-1)。应该像这个例子一样删除空格:https://jsfiddle.net/sebastianbrosch/3obsbh5n/2/