Div Based Table Example, highly configurable

echo "<div class='table'>
    <div class='trHeadings'>
       <div class='HeadtdColumn1'>
            Title 1
        </div>
        <div class='HeadtdColumn2'>
         Title 2
        </div>
        <div class='HeadtdColumn3'>
         Title 3
        </div>
        <div class='HeadtdColumn4'>
         Title 4
        </div>
        <div class='HeadtdColumn5'>
         Title 5
        </div> 
        <div class='HeadtdColumn6'>
         Title 6
        </div>
   </div>
</div>";

echo "<div class='table'>
         <div class='tr'>
            <div class='tdColumn1'></div>
            <div class='tdColumn2'></div>
            <div class='tdColumn3'></div>
            <div class='tdColumn4'></div>
            <div class='tdColumn5'></div> 
            <div class='tdColumn6'></div>
         </div>
      </div>";

/* Div Based Table styles */   
.table {
    margin-bottom: 0px; !important;
}

div.table {
    display: table;
}

div.trHeadings {
    display: table-row;
}


div.tr {
    display: table-row;
}

div.HeadtdColumn1, div.HeadtdColumn2, div.HeadtdColumn3, div.HeadtdColumn4, div.HeadtdColumn5, div.HeadtdColumn6 {
    display: table-cell;
    padding: 6px;
    vertical-align: middle;
    border-bottom: 2px solid #fefefe;
}

div.HeadtdColumn1 {
   text-align: center;
   width: 15%;
}
div.HeadtdColumn2 {
    width: 10%;
   text-align: left;
}
div.HeadtdColumn3 {
    width: 20%;
   text-align: center;
}
div.HeadtdColumn4 {
    width: 25%;
   text-align: center;
}
div.HeadtdColumn5 {
    width: 15%;
   text-align: center;
}
div.HeadtdColumn6 {
   width: 15%;
   text-align: center;
}


div.tdColumn1, div.tdColumn2, div.tdColumn3, div.tdColumn4, div.tdColumn5, div.tdColumn6 {
    display: table-cell;
    padding: 6px;
    vertical-align: middle;
}

div.tdColumn1 {
   text-align: center;
   width: 15%;
}
div.tdColumn2 {
    width: 10%;
   text-align: left;
}
div.tdColumn3 {
    width: 20%;
      text-align: center;
}
div.tdColumn4 {
    width: 25%;
      text-align: center;
}
div.tdColumn5 {
    width: 20%;
      text-align: center;
}
div.tdColumn6 {
    width: 15%;
      text-align: center;
}


div.table-list > div.trHeadings {
    background-color: #E6ECEF;
    color: #333;
    font-size: 14px;
}

div.table-list {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

div.table-list > div.tr:hover  {
   background-color: #ecf7ff;
    cursor: pointer;
    cursor: hand;
}

div[class^='tdColumn'], div[class*=' tdColumn'] {
    font-size: 13px;
}
   
div.table-list > div[class^='tdColumn'], div[class*=' tdColumn'] {
    padding: 5px 10px;
    vertical-align: middle;
}

div.tdColumn6 label {
    font-size: 15px;
    font-weight: 100;
    margin: -3px 20px 0 5px;
    vertical-align: top;
    text-transform: uppercase;
    cursor: pointer;
   font-family: "proxima_nova", Arial !important;
    color: #1e202c;
}

div.tdColumn6 input[type="checkbox"] {
    -webkit-appearance: none;
    background: #fff;
    height: 14px;
    width: 14px;
    margin: 0;
    border: 1px solid #cacaca;
    outline: none;
    position: relative;
}

div.tdColumn6 input[type="checkbox"]:checked {
    background-color: #4a921b;
    border: 1px solid #4a921b;
    color: #fff;
}

div.tdColumn6 input[type="checkbox"]:checked:after {
    content: '\2714';
    font-size: 10px;
    position: absolute;
    top: 0px;
    left: 1px;
    color: #fff;
    font-family: "Times New Roman", Times, serif;
}

div.tdColumn5 label {
    font-size: 15px;
    font-weight: 100;
    margin: -3px 20px 0 5px;
    vertical-align: top;
    text-transform: uppercase;
    cursor: pointer;
   font-family: "proxima_nova", Arial !important;
    color: #1e202c;
}

div.tdColumn5 input[type="checkbox"] {
    -webkit-appearance: none;
    background: #fff;
    height: 14px;
    width: 14px;
    margin: 0;
    border: 1px solid #cacaca;
    outline: none;
    position: relative;
}

div.tdColumn5 input[type="checkbox"]:checked {
    background-color: #4a921b;
    border: 1px solid #4a921b;
    color: #fff;
}

div.tdColumn5 input[type="checkbox"]:checked:after {
    content: '\2714';
    font-size: 10px;
    position: absolute;
    top: 0px;
    left: 1px;
    color: #fff;
    font-family: "Times New Roman", Times, serif;
}