In my current project, I am working on styling a list to resemble a table layout for horizontal alignment. The first column contains labels, while the second column features groups of buttons using Bootstrap's btn-group-justified class. This setup essentially creates a nested table effect due to the use of display: table.
The issue I'm facing is that there appears to be extra space above the contents of the first cell and below the contents of the second cell, highlighted in blue as seen here:
https://i.sstatic.net/kItgz.png
Below is the HTML code snippet:
<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 here is the corresponding 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 spacing issue persists across browsers such as Firefox and Chrome. After inspecting the cells and their content, it seems that there are no relevant margins or paddings causing this problem. How can this excess space be eliminated?