Creating multi row headers - html

Question

I am trying to make kind of table which has a header row then details row below it and then another header row below that and so on. It looks like this:
But I also need to borders between each cell.
Here is a jsFiddle for it: http://jsfiddle.net/MyeXa/2/
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Pens</h1>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-6">
Created On
</div>
<div class="col-md-6">
Last Updated On
</div>
</div>
<div class="row">
<div class="col-md-6">
30/01/2013
</div>
<div class="col-md-6">
04/02/2013
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-4">
Item Number
</div>
<div class="col-md-4">
Item Name
</div>
<div class="col-md-4">
Item Description
</div>
</div>
<div class="row">
<div class="col-md-4">
5555
</div>
<div class="col-md-4">
Pen
</div>
<div class="col-md-4">
Nice pen
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-6">
Status
</div>
<div class="col-md-6">
Repair Status
</div>
</div>
<div class="row">
<div class="col-md-6">
Good
</div>
<div class="col-md-6">
Fixed
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-12">
Assigned Shop
</div>
</div>
<div class="row">
<div class="col-md-12">
Shop 1
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-6">
LT
</div>
<div class="col-md-6">
LT Pending
</div>
</div>
<div class="row">
<div class="col-md-6">
N/A
</div>
<div class="col-md-6">
416 Days and 33 Minutes
</div>
</div>
</div>
</div>
</div>
Now the problem came when I tried to add borders to separate each cell, the line is cut in the middle (see the fiddle output). I am not sure if I should change the layout or if I need to do something else with the CSS

Answer 1

Set margin-bottom:0 on the H4..
.row .h4 {
border-top: 1px solid #DADADA !important;
padding-top: 10px;
margin-bottom:0;
}
http://jsfiddle.net/MyeXa/4/
If you want to remove all of the gaps you also need to remove the top margin, and adding padding to the cols..
http://jsfiddle.net/MyeXa/5/

Answer 2

<table>
<tr><th>column 1</th><th>column two</th><th>and column 3</th></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><th>new column 1</th><th>column two</th><th>and column 3</th></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
</table>
This works, now you can style it to your hearts content!