¿Cómo conseguir que la CSS de la tabla y la propiedad del borde funcionen juntas?

Question

que tienen este CSS:

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

En realidad, la propiedad border es simplemente ignorado. ¿Por qué? ¿Cómo puedo arreglarlo?
DEMO
Gracias

Answer 1

Si se agrega una 'célula' de la tabla fila, por ejemplo:

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

A continuación, el siguiente CSS funciona:

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

JS Fiddle demo.

Es importante recordar que el navegador representará un elemento tal como se lo indique; así que si dices div a display: table-rowse mostrará de esa manera; y table-row no tiene un border. table-cell s do, sin embargo, por lo que agregué el hijo div y le asigné esa propiedad display.

Answer 2

filas tabla no puede tener fronteras. Las celdas dentro de una fila de la tabla pueden, pero la fila en sí no puede.

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