Question

我有这个CSS：

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

实际上，边框属性只是被忽略了。为什么？我该如何解决？ DEMO
感谢

Answer 1

表行不能有边框。表格行中的单元格可以，但行本身不能。

Answer 2

如果你添加一个＆＃39;单元＆＃39;到表格行，例如：

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

然后以下CSS工作：

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

JS Fiddle demo

重要的是要记住，浏览器会在您告诉它时呈现元素;因此，如果您告诉div display: table-row ，它会以这种方式显示;而table-row没有border。 table-cell这样做，这就是为什么我添加了孩子div并为其分配了display属性。

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

如何让表行css和border属性一起工作？

3 个答案: