如何使表格行 CSS 和边框属性协同工作？

Question

我有这段CSS代码：

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

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

- ilyes kooli

---

你可以查看这个链接：https://dev59.com/q2w05IYBdhLWcg3wiybg - Ángel B.

Answer 1

的行不能有边框，但是表格行内的单元格可以有边框。

- Niet the Dark Absol

---

我正在将这个CSS应用于一个DIV。 - ilyes kooli

一个 div 元素，你可以让它假装成一个表格行 (tr) 元素。 - David Thomas

@skafandri，您正在应用table-row，因此它的行为就像一个表格行； - Ricardo Souza

真正的好奇，没有讽刺的意味：浏览器是否“允许”对行应用不正确的边框（对于适当的表格，而不仅仅是使用table-row显示属性）？这个测试在Firefox中有效，但可能只是宽容了不良的样式：http://jsfiddle.net/9QWj9/ - Greg Pettit

Answer 2

如果您向表格行添加一个“单元格”，例如：

<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演示。

需要记住的是，浏览器会按照你的要求来渲染元素；所以如果你告诉一个 div 使用 display: table-row，它就会以这种方式显示；而 table-row 没有 border。但是 table-cell 有，这就是我添加子元素 div 并分配给它该 display 属性的原因。

- David Thomas

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>

演示

- ilyes kooli

---

这不是一个答案。你需要想象如果链接失效，它仍然可用，但现在它不可用。 - Greg Pettit