Empty ordered list messed up css tables table

Why is the empty unordered list in the first table dragging the list to another "table-cell"?

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 that populates both lists is how I expected the layout to look

Obviously I just couldn't have an empty <ol>

one and the effect would be the same, but I'm curious why.

+3


source to share


2 answers


This has to do with how baselines are calculated in table cells depending on whether they have embedded content. spec sums it up:

The baseline of a cell is the baseline of the first flow of a row in a cell or the first table of a flow in a flow, row in a cell, whichever comes first. If no such row or table exists, the baseline is the lower bound of the cell's content.

Since your table cell, like all of its descendants, has no text, it does not create any rows. The only other cells in your empty cell are block-blocks created internally <div>

and <ol>

accordingly. The bottom of these boxes becomes the base.



This baseline is then aligned with the text in another cell, without actually affecting that cell's internal layout. This causes the cell to be pushed down.

Note that not only one <ol>

will not give the desired effect, as the inner one <div>

will still capture the baseline of the table cell. The cell must be completely empty, or at least its contents must have zero height.

+1


source


This is because the default vertical alignment of your cells is set to baseline

(as you can see from the green line in the screenshot)

enter image description here

add vertical-align: top

to.table-cell



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

      

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

+2


source







All Articles