我试图在我的网站上使用div创建一个类似于表格的结构,但是边框有些困难。我希望有一条水平线分隔每一行,但在div设置为border
时使用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%;
}
答案 0 :(得分:39)
如果您想在border-collapse: collapse
中设置.table
,还可以将border
添加到.row
。
答案 1 :(得分:15)
您可以将border-bottom
属性应用于单元类而不是行类。
这是一个固定的演示:http://jsfiddle.net/WXCa6/