How to get css value and border properties in a table?

Question

I have this CSS:

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

Actually, the border property is simply ignored. What for? How can I fix it?
Demo
Thanks

Answer 1

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 is important to remember that the browser will display the item as you tell it; therefore, if you tell div - display: table-row , it will be displayed in this way; and a table-row does not have border . table-cell , however, so I added a child div and assigned the display property to it.

Answer 2

Table rows cannot have borders. The cells inside the table row can, but the row itself cannot.

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> 

demo