Дополнительное пространство вокруг вложенных divs с отображением: table

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

Хм, получается, что я могу это исправить, установив стол-клетки vertical-align ни к чему, кроме baseline.

ol.table-list > li > div { 
    display: table-cell; 
    vertical-align: middle; 
}