0

I have a list that I'm styling like a table, so that the contents are horizontally aligned. The first column contains labels, and the second contains groups of buttons using Bootstrap's btn-group-justified class - which is also using display: table, so it's effectively a nested table.

The problem is that there is extra space added above the contents of the first cell and below the contents of the second, shown here in blue:

enter image description here

Here is the 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>

And the stylesheet:

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

This happens in both Firefox and Chrome. When I inspect the cells and their contents, there is no relevant margin and no padding. How can I get rid of that space?

Demo in Plunker

z0r
  • 8,185
  • 4
  • 64
  • 83
  • 1
    Related: [CSS Inline-Block Elements Not Lining Up Properly](http://stackoverflow.com/q/19366401/1529630) – Oriol Aug 14 '15 at 01:08
  • @Oriol Interesting, thanks! `vertical-align` does help. The `display` property of the `span` has little effect, unless it's set to `table-caption` (which smells fishy). – z0r Aug 14 '15 at 01:15

1 Answers1

0

Hmm, it turns out I can fix it by setting the table-cell's vertical-align to anything other than baseline.

ol.table-list > li > div {
  display: table-cell;
  vertical-align: middle;
}
z0r
  • 8,185
  • 4
  • 64
  • 83