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

Question

我有这个CSS:

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

实际上,border属性只是被忽略了.为什么？我该如何解决？
演示
谢谢

Answer 1

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

Answer 2

如果将“单元格”添加到表格行，例如：

\n\n

<div id="content">\n    <div id="top">TOP</div>\n    <div id="center">\n        <div>CENTER</div>\n    </div>\n</div>\xe2\x80\x8b\n

\n\n

然后下面的 CSS 就可以工作了：

\n\n

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

\n\n

JS 小提琴演示。

\n\n

重要的是要记住，浏览器将按照您的指示渲染元素；所以如果你告诉 adiv它display: table-row 就会这样显示；并且 atable-row没有 a border。table-cell不过，这就是为什么我添加了孩子div并将其分配给display属性。

\n