<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>
根据我的理解，应该在我通过 tablerow 类指定的每一行上绘制一个黑色边框。但是边界没有出现。
我想改变一行的高度。如果我用“px”指定它——它就可以工作。但是，如果我给它一个 % -- 将不起作用。我尝试了以下操作
.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 %
}
某处出了问题，但我不明白是哪里出了问题。请帮忙!
最佳答案
您需要添加 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>
关于fluid-layout - CSS 显示 :table not displaying the border，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7175049/