从 table 单元格中删除白色 space

Question

我有以下 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

我想删除按钮组旁边多余的 space，这样两边的边距就很小。每个按钮都有固定宽度，按钮组也是如此：

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）上的所有类。 space 应该像这个例子一样删除：https://jsfiddle.net/sebastianbrosch/3obsbh5n/2/

Answer 2

Bootstrap CSS 中的 table-condensed tbody>tr>td 似乎有 5 像素的填充。您可以通过多种方式用自己的风格覆盖它。一个简单的示例是将 class 添加到一些 td 元素，您将在这些元素中放置按钮：

<td class="buttonCell">

并使用如下内容覆盖 Bootstrap 样式：

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

从 table 单元格中删除白色 space

Remove white space from table cell

html

css

twitter-bootstrap-3

css-tables