css display:table not displaying the border

<html>
<style type="text/css">
.table   { display: table;}
.tablerow  { display: table-row; border:1px solid black;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>

According to my understanding, a black border should be drawn on each of the rows which I've specified via tablerow class. But the border doesn't come up.

And I wanted to change the height of a row. If I specify it with 'px' -- it works. But, if I give it with a % -- won't work.I tried the following

.tablerow  {
display: table-row;
border:1px solid black;
position: relative; //not affecting anything and the border disappears!!
//position: absolute; // if this is set,the rows overlaps and the border works
height: 40%; // works only if specified in px and not in %
}

Something is going wrong somewhere, but I am not able to understand where. Please help!

80976 次浏览
小开

您需要将 border添加到 tablecell类中。

另外，为了使它看起来更漂亮，您需要将 border-collapse:collapse;添加到表类中。

例子: http://jsfiddle.net/jasongennaro/4bvc2/

剪辑

根据评论

我正在对 div 应用边框，它应该显示正确吗？

是的，但是一旦你设置它显示为一个 table，这是它将如何行动... 作为一个 table，所以你需要遵循 CSS 规则来显示表。

如果只需要在行上设置 border，那么使用 border-top和 border-bottom，然后为最左边和最右边的单元格设置特定的类。

小开

表格行不能有边框属性。通过为所有单元格分别设置顶部和底部边框，并为最左边和最右边的单元格分别添加一个类，可以在每一行周围设置边框。

JS 小提琴链接

edit: I forgot about border-collapse:collapse. That will work too.

小开
最佳答案

您需要将 border-collapse: collapse;添加到 .table类中，以使其像下面这样工作:

<html>
<style type="text/css">
.table   { display: table; border-collapse: collapse;}
.tablerow  { display: table-row; border: 1px solid #000;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>

提交答案