Table using css

I am using the following css to mimic a table:

.table {
 width: 100%;
 b开发者_如何转开发order: 1px solid #f00; 
}

.table .th {
background-color: #f00;
 color: #fff;
 font-weight: bold;
 border-bottom: 1px dotted #f00;
}

.table .td {
 display: inline-block;
 width: 23%;
 padding-left: 2%;
}

Is there a way to have line that will separate each row? Thanks, Evan

Please use tables rather than recreating tables. They have a purpose. If you are creating tubular data list, like a spreadsheet, then just use a table.

This is more of a pet peeve, but it's just a waste of code that quickly becomes unmanageable.

Not too sure what the structure of your markup is but if you mimic a table row (.tr) and wrap each row of tds in it then you will have more styling control through the css.

If not, just applying a border-bottom to the td class will also work.

@seth is right too, there no no problem using tables to show data.