Bootstrap – Use CSS col-md-* & Div as a Table

Bootstrap – Use CSS col-md-* & Div as a Table

   CSS
 
   <style>
 
      #table_wrapper
      {
         width:95%;
         margin:10px auto 0px auto;
      }
 
      .row
      {
      }
 
      .row_header
      {
         border-bottom:1px solid #000055;
      }
 
      .row_header div
      {
         font-weight:bold;
         cursor:default;
      }
 
      .row_content
      {
         border-bottom:1px solid #EEEEEE;
         cursor:pointer;
      }
 
      .row_content div, .row_header div
      {
         line-height:35px;
      }
 
      .row_content:hover
      {
         background-color:#F6F6FF;
         color:#000099;
      }
 
      .firstname_header, .firstname_header, .post_header, .phonenum_header
      {
         font-weight:bold;
      }
 
   </style>
 
   HTML
 
   < div id="table_wrapper">
 
      < div class="row row_header">
         < div class="firstname_header col-md-3">First Name</div>
         < div class="lastname_header col-md-3">Last Name</div>
         < div class="post_header col-md-4">Post Title</div>
         < div class="phonenum_header col-md-2">Phone Num</div>
      </div>
 
      < div class="row row_content">
         < div class="firstname_content col-md-3">First Name ??</div>
         < div class="lastname_content col-md-3">Last Name ??</div>
         < div class="post_content col-md-4">Post Title ??</div>
         < div class="phonenum_content col-md-2">Phone Num ??</div>
      </div>
 
      < div class="row row_content">
         < div class="firstname_content col-md-3">First Name ??</div>
         < div class="lastname_content col-md-3">Last Name ??</div>
         < div class="post_content col-md-4">Post Title ??</div>
         < div class="phonenum_content col-md-2">Phone Num ??</div>
      </div>
 
   </div>