Comment faire fonctionner ensemble la css de table-row et la propriété border ?

Question

J'ai cette CSS :

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

En fait, la propriété de la bordure est simplement ignorée. Pourquoi ? Comment puis-je le corriger ?
DEMO
Merci

Answer 1

Les lignes du tableau ne peuvent pas avoir de bordures. Les cellules d'une ligne de tableau peuvent en avoir, mais pas la ligne elle-même.

Answer 2

Si vous ajoutez une "cellule" à la ligne du tableau, par exemple :

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

Le CSS suivant fonctionne alors :

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

Démonstration de JS Fiddle .

Il est important de se rappeler que le navigateur rendra un élément comme vous le lui demandez ; ainsi, si vous dites à un élément div a display: table-row il s'affichera de cette façon et un table-row n'a pas de border . table-cell Cependant, c'est la raison pour laquelle j'ai ajouté l'enfant div et l'a assigné que display propriété.

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