Pure CSS Tableless

Here is sample code to make pure css tableless design. Create table without table.


The First, insert this css style:

.table{display: table;width:500px;margin:5px auto;height:300;overflow:auto}
.table p{width:100%;padding:0,display: table-row;margin:0}
.table span{font:13px/1.5 Arial;width:200px;display: table-cell;text-align:center;vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;}
.table .tt{border-right:1px solid #ddd;}
.table .c1{width:140px;}
.table .c2{width:120px;}
.table .c3{width:120px;}
.table .p1{background:#ddd;font-weight:bold;}

The Second, your HTML table:

<div class="table">

<p><span class="c1 p1">DATE</span><span class="c2 p1">TIME</span><span class="c3 p1 tt">HITS</span></p>

<p><span class="c1">29-1-2012</span><span class="c2">10.47</span><span class="c3 tt">15.286</span></p>

<p><span class="c1">25-8-2011</span><span class="c2">02.01</span><span class="c3 tt">11.989</span></p>

<p><span class="c1">1-6-2011</span><span class="c2">22.49</span><span class="c3 tt">4.545</span></p>

<p><span class="c1">25-12-2010</span><span class="c2">02.57</span><span class="c3 tt">3.159</span></p>

</div>

Here the result:

DATETIMEHITS

29-1-201210.4715.286

25-8-201102.0111.989

1-6-201122.494.545

25-12-201002.573.159

Click another Pure CSS table example live demo.