CSS显示：表格不显示边框
<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>
您需要将border添加到tablecell类。
此外，为了使它看起来不错，你将需要添加border-collapse:collapse; 到表类。
例如： http : //jsfiddle.net/jasongennaro/4bvc2/
编辑
根据评论
我应用边框到一个div，它应该显示正确吗？
是的，但是一旦你把它设置为一个table来显示这个table ，那么你将需要按照css规则来显示表格。
如果只需要在行上设置border ，请使用border-top和border-bottom ，然后为最左侧和最右侧的单元格设置特定的类。
表格行不能有边框属性。 您可以通过给所有的单元格设置顶部和底部边框，并为左侧和右侧边框的最左侧和最右侧单元格分别添加一个类，从而获得每一行的边框。
JS小提琴链接
编辑：我忘了border-collapse:collapse 。 这也会起作用。
