Empty ordered list messes up CSS table layout

Question

Why does the the empty unordered list in the first table push the list in the other 'table-cell' down?

HTML

<div class="table">
    <div class="table-row">
        <div class="table-cell">
            <div>
                <ol>
                    <li>an item</li>
                </ol>
            </div>
        </div>
        <div class="table-cell">
            <div>
                <ol>
                </ol>
            </div>
        </div>
    </div>
</div>

CSS

.table {
  display: table;
  width:100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  border: 1px solid red;
  width: 50%;
}

.table-cell > div {
  border: 1px solid blue;
  height: 100px;
}

.table-cell ol {
  border: 1px solid black;
}

Full example at http://jsfiddle.net/facboy/7bs4xopg/. The second table where both lists are populated is how I expected the layout to look

Obviously I could just not have the empty <ol> and the effect would be the same, but I'm curious as to the reason.

Answer 1

That happens because the vertical-alignment of your cells is set by default to baseline (as you can see from green line on the screenshot)

thus add a vertical-align: top to .table-cell

.table-cell {
   ...
   vertical-align: top;  
}

Fork: http://jsfiddle.net/b86qyzc5/