Div table-row Border?

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 border on a div set to table-row seems to have no effect. What am I doing wrong? Thanks for your help!

<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%;
}

You can also add border-collapse: collapse to .table if you want to set border in the .row.

You can apply your border-bottom property to the cell class instead of row class.
Here is a fixed demo: http://jsfiddle.net/WXCa6/