CSS css显示：表格不显示边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7175049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css display:table not displaying the border
提问by Vivek Chandra
<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 doesnt come up.
根据我的理解，应该在我通过 tablerow 类指定的每一行上绘制黑色边框。但边框没有出现。
And i wanted to change the height of a row.If i specify it with 'px' -- it work.But,if i give it with a % -- wont work.I tried the following
我想改变一行的高度。如果我用“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 %
}
Something is going wrong somewhere, but I am not able to understand where. Please help!
某处出了点问题，但我无法理解在哪里。请帮忙！
回答by dSquared
You need to add border-collapse: collapse;to the .tableclass for it to work like this:
您需要添加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>
回答by Jason Gennaro
You need to add the borderto the tablecellclass.
您需要将 加入border到tablecell类中。
Also, to make it look nice, you will need to add border-collapse:collapse;to the table class.
此外，为了让它看起来不错，您需要添加border-collapse:collapse;到表类中。
Example: http://jsfiddle.net/jasongennaro/4bvc2/
示例：http: //jsfiddle.net/jasonennaro/4bvc2/
EDIT
编辑
As per the comment
根据评论
i'm applying a border to a div,it should get displayed right ?
我正在为 div 应用边框，它应该正确显示吗？
Yes, but once you set it to display as a tablethat is how it will act... as a table, so you will then need to follow the css rules for displaying tables.
是的，但是一旦您将其设置为显示为 atable这就是它的行为方式...作为 a table，因此您将需要遵循用于显示表格的 css 规则。
If you need to set the borderonly on the rows, use border-topand border-bottomand then set specific classes for the leftmost and rightmost cells.
如果您需要设置border只对行，用border-top和border-bottom，然后最左边和最右边的细胞组特定的类。
回答by Ethan Shepherd
Table rows can't have a border attribute. You can get a border around each row by giving all cells a top and bottom border, and adding a class for the left-most and right-most cells with a left and right border respectively.
表格行不能有边框属性。您可以通过为所有单元格提供顶部和底部边框，并为最左侧和最右侧的单元格分别添加一个带有左右边框的类来获得每行周围的边框。
edit: I forgot about border-collapse:collapse. That will work too.
编辑：我忘记了border-collapse:collapse。那也行。
