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放在Bootstrap的CSS之后！ Additonaly删除th上的所有类（名为col-md-1）。应该删除空格，如下例所示：https://jsfiddle.net/sebastianbrosch/3obsbh5n/2/

从表格单元格中删除空格

1 个答案: