带有display：table的嵌套div周围的额外空间

Question

我有一个列表，我的样式就像一个表，所以内容是水平对齐的。第一列包含标签，第二列包含使用Bootstrap btn-group-justified类的按钮组 - 它也使用display: table，因此它实际上是一个嵌套表。

问题是在第一个单元格的内容上方和第二个单元格的内容之下添加了额外的空间，此处显示为蓝色：

这是HTML：

<ol class="table-list">
  <li>
    <div>
      <span>Row 1</span>
    </div>
    <div>
      <div class="btn-group btn-group-justified">
        <div class="btn-group">
          <button class="btn btn-default">Option A</button>
        </div>
        <div class="btn-group">
          <button class="btn btn-default">Option B</button>
        </div>
      </div>
    </div>
  </li>
</ol>

样式表：

ol.table-list {
  display: table;
  list-style: none;
  padding: 0;
  border-collapse: collapse;
}
ol.table-list > li {
  display: table-row;
}
ol.table-list > li > div {
  display: table-cell;
}
ol.table-list > li > div > span {
  display: inline-block;
  white-space: nowrap;
  background: white;
  padding: 6px 12px;
  line-height: 20px;
  margin: 0;
}

这在Firefox和Chrome中都会发生。当我检查细胞及其内容时，没有相关的边距和填充。我该如何摆脱那个空间呢？

Demo in Plunker

Answer 1

嗯，事实证明我可以通过将表格单元格public function updateMyDB() { $sql = "UPDATE pelayanan P " . "LEFT JOIN filter F ON F.ID_AREA = area.ID_AREA " . "SET ID_VERIFIKASI = 3 " "WHERE P.ID_AREA = " . $ID_AREA . "AND F.ID_AREA = " . $ID_AREA . "AND F.ID_RAYON = " . $ID_RAYON . "AND P.ID_RAYON = F.F1_RAYON " . "AND SUBSTR(TGLRUBAH, 3, 6) = F.F1_BULANTAHUN " . "AND ID_VERIFIKASI = 2 " . "AND ID_KENDALA IS NOT NULL"; $this->db->query($sql); return ($this->db->affected_rows() > 0); } 设置为除vertical-align以外的任何内容来解决此问题。

baseline