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> |