Create table based on div - row's border

Question

I wolud like to create a table based on div. Here is my CSS code:

.div-table{
display:table;         
width: 100%;         
border: 1px solid #C9C9C9;
}

.div-table-row{
display:table-row;
width: 100%;
clear:both;
text-align: center;
}

.div-table-row-head{
display:table-row;
background: #33A1DE;
color: #fff;
width: 100%;
line-height: 280%;
clear:both;
}

.div-table-col-head{
float:left;
display: table-column;
min-height: 50px;
border-right: 1px solid #C9C9C9;  
border-top: 1px solid #C9C9C9;
font-family: Verdana;
font-size: 17px;
border-top: none;
width: 100%;
padding-left: 15px;
}

.div-table-col{
float:left;
display: table-column;
min-height: 50px;
border-right: 1px solid #C9C9C9;  
border-top: 1px solid #C9C9C9;
font-family: Verdana;
font-size: 15px;
padding: 15px 0 5px 0;
}

And my HTML code:

<div class="div-table">
<div class="div-table-row-head">
    <div class="div-table-col-head">USTAWIENIA</div>
</div>
<div class="div-table-row">
    <div class="div-table-col" style="width: 19.73%;">001 hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hh hh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hhh hh hh hhh hhh hhh hhh</div>
    <div class="div-table-col" style="width: 20%;">002</div>
    <div class="div-table-col" style="width: 20%;">003</div>
    <div class="div-table-col" style="width: 20%;">003</div>
    <div class="div-table-col" style="width: 20%; border-right: none;">003</div>
</div>
<div class="div-table-row">
    <div class="div-table-col" style="width: 19.73%;">xxx</div>
    <div class="div-table-col" style="width: 20%;">yyy</div>
    <div class="div-table-col" style="width: 20%;">www</div>
    <div class="div-table-col" style="width: 20%;">www</div>
    <div class="div-table-col" style="width: 20%; border-right: none;">www</div>
</div>
<div class="div-table-row">
    <div class="div-table-col" style="width: 19.73%;">ttt</div>
    <div class="div-table-col" style="width: 20%;">uuu</div>
    <div class="div-table-col" style="width: 20%;">Mkkk</div>
    <div class="div-table-col" style="width: 20%;">Mkkk</div>
    <div class="div-table-col" style="width: 20%; border-right: none;">Mkkk</div>
</div>

Here is output: http://jsbin.com/IkiqaSir

And how I can remove breaks into borders of rows? You can see it in first row.

Answer 1

Use a <table>

JSFiddle Demo 1

JSFiddle Demo 2 - an example with lots of content in one of the cells.

CSS

table { border-collapse: collapse; width:100%;}
table {border:1px solid #ccc;}
table th { border-bottom:1px solid #ccc; text-align: left; padding:10px; background:#33A1DE; color:#fff;}
table td { padding:10px; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}

HTML

<table>
    <tr>
        <th colspan="5">content</th>
    </tr>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
</table>