Html Div 表行边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5542418/
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
Div table-row Border?
提问by Vecta
I am attempting to create a table-like structure using divs on my site but am having some difficulty with borders. I'd like there to be a horizontal line separating each row but using borderon a div set to table-rowseems to have no effect. What am I doing wrong? Thanks for your help!
我试图在我的网站上使用 div 创建一个类似表格的结构，但在边框方面遇到了一些困难。我希望有一条水平线分隔每一行，但border在 div 集上使用table-row似乎没有效果。我究竟做错了什么？谢谢你的帮助！
<div class="table">
<div class="row">
<div class="cell">
<p>Blah blah</p>
</div>
<div class="cell">
<p>Blah blah</p>
</div>
<div class="cell">
<p>Blah blah</p>
</div>
</div>
</div>
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
border-bottom: 1px solid black;
}
.cell {
display: table-cell;
width: 33%;
}
回答by theblang
You can also add border-collapse: collapseto .tableif you want to set borderin the .row.
您还可以添加border-collapse: collapse到.table，如果你想设置border的.row。
回答by LostLin
You can apply your border-bottomproperty to the cell class instead of row class.
Here is a fixed demo: http://jsfiddle.net/WXCa6/
您可以将您的border-bottom属性应用于单元格类而不是行类。
这是一个固定的演示：http: //jsfiddle.net/WXCa6/
