html - How to get table-row css and border property work together?

Question

I have this CSS:

#center{
    display:table-row;
    border:solid #55A 1px;
    background-color:#AAF;
    height:100%;
}

Actually, the border property is just ignored. Why? How can I Fix it?
DEMO
Thanks

Answer 1

Table rows can't have borders. Cells within a table row can, but the row itself cannot.

Answer 2

If you add a 'cell' to the table-row, for example:

<div id="content">
    <div id="top">TOP</div>
    <div id="center">
        <div>CENTER</div>
    </div>
</div>​

Then the following CSS works:

#center{
    display:table-row;
}
#center > div {
    display: table-cell;
    border:solid #55A 1px;
    background-color:#AAF;
    height:100%;
}

JS Fiddle demo.

It's important to remember that the browser will render an element as you tell it to; so if you tell a div to display: table-row it will display that way; and a table-row does not have a border. table-cells do, though, which is why I added the child div and assigned it that display property.

Answer 3

CSS

#content{
    display:table;
    border:solid black 1px;    
    width:250px;
    height:300px;
}
.center{
    display:table-row;
}
.center > div {
    display: table-cell;
    border:solid #55A 1px;
    background-color:#AAF;

}
#top{      
  border:solid red 1px;
}

HTML

<div id="content">
    <div class="center" style="height:50px">
        <div id="top">TOP</div>
    </div>
    <div class="center" style="height:100%">
        <div>CENTER</div>
    </div>
    <div class="center" style="height:50px">
        <div>BOTTOM</div>
    </div>
</div>

デモ