CSS Tableless Table

Tableless table using HTML and CSS

HTML

<div class="table">
  <div class="th">
    <div class="td">No</div>
    <div class="td">Name</div>
    <div class="td">Email</div>
    <div class="td">Phone No</div>
    <div class="clear"></div>
  </div>
  <div class="tr">
    <div class="td">01</div>
    <div class="td">Shanid</div>
    <div class="td">[email protected]</div>
    <div class="td">444-555-666</div>
    <div style="clear: both;"></div>
  </div>
  <div class="tr">
    <div class="td">02</div>
    <div class="td">John</div>
    <div class="td">[email protected]</div>
    <div class="td">444-555-666</div>
    <div style="clear: both;"></div>
  </div>
  <div class="tr">
    <div class="td">03</div>
    <div class="td">Roy</div>
    <div class="td">[email protected]</div>
    <div class="td">444-555-666</div>
    <div class="clear"></div>
  </div>
</div>

CSS

body {
   background-color: #FFF;
   font-family: Arial;
   font-size: 12px;
}
.table {
   display: table;
   border: 1px solid #40A1F5;
}
.table .th {
   display: table-row;
   background-color: #40A1F5;
   color: #fff;
   font-weight: bold;
}
.table .tr:nth-child(odd) {
 background-color: #F9F9F9;
}
.table .tr{
  display: table-row;
  border-bottom: 1px solid #000;
}
.table .td {
  display: table-cell;
  padding: 15px;
  border-bottom: 1px solid #40A1F5;
}
.table .tr:last-child .td{
  border: 0;
}
.clear {
  clear: both;
}