"Responsive Table with spaced sections"
Bootstrap 3.2.0 Snippet by girliestgeek

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-sm-6 col-md-6 col-sm-offset-3 col-md-offset-3"> <table class="table stats caps"> <thead> <tr> <td>Superhero</td> <td>Alter Ego</td> <td>Sidekick</td> <td>Vehicle</td> </tr> </thead> <tbody> <tr style="background:#e73a3f;color:#e6f0f9; border-radius:6px;"><!--Adjust bg and font colors inline--> <td>Batman</td> <td>Bruce Wayne</td> <td>Robin</td> <td>Batmobile</td> </tr> <!--Spacer--> <tr class="spacing"> <td colspan="4"></td><!--Colspan should match width of your table--> </tr> <!--End Spacer--> <tr style="background: #d8e2ea; border-radius:6px; color: #697880;"><!--Adjust bg and font colors inline--> <td>Spiderman</td> <td>Peter Parker</td> <td>N/A</td> <td>Web-Slinging</td> </tr> <!--Spacer--> <tr class="spacing"> <td colspan="4"></td><!--Colspan should match width of your table--> </tr> <!--End Spacer--> <tr style="background: #d8e2ea; border-radius:6px; color: #697880;"><!--Adjust bg and font colors inline--> <td>Wonder Woman</td> <td>Diana Prince</td> <td>N/A</td> <td>Invisible Jet</td> </tr> </tbody> </table> </div>
table{margin:10px 0px; border:none !important;} thead{font-weight:700;} .table tbody>tr>td, .table tfoot>tr>td {padding: 8px; line-height: 1.428571429; vertical-align: top; border-top:none;} .spacing{height:10px; background: transparent; content: none;} @media (max-width: 632px){ /*Responsive Table*/ thead{display: none;} tr:nth-of-type(odd) {background: #eee;} td, tr {display: block;} /*Column Section Titles*/ .stats td:nth-of-type(1):before {content: "Superhero: ";} .stats td:nth-of-type(2):before {content: "Alter Ego: ";} .stats td:nth-of-type(3):before {content: "Sidekick: ";} .stats td:nth-of-type(4):before {content: "Vehicle: ";} .spacing td:before {content:" "!important;} /*Add More based on the number of columns you have*/ }

Related: See More


Questions / Comments: