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


i have css:

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

actually, border property ignored. why? how can fix it?
demo
thanks

if add 'cell' table-row, example:

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

then 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 remember browser render element tell to; if tell div display: table-row it display way; , table-row not have border. table-cells do, though, why added child div , assigned display property.


Comments

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -

php - Controller/JToolBar not working in Joomla 2.5 -