"Responsive Table"
Bootstrap 3.0.0 Snippet by sbmumbai

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <body> <div class="container"> <div class="row"> <div class="col-xs-12"> <table id="table"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> <th>Height</th> <th>Province</th> <th>Sport</th> </tr> </thead> <tbody> <tr> <td>Jill Smith</td> <td>25</td> <td>Female</td> <td>5'4</td> <td>British Columbia</td> <td>Volleyball</td> </tr> <tr> <td>John Stone</td> <td>30</td> <td>Male</td> <td>5'9</td> <td>Ontario</td> <td>Badminton</td> </tr> <tr> <td>Jane Strip</td> <td>29</td> <td>Female</td> <td>5'6</td> <td>Manitoba</td> <td>Hockey</td> </tr> <tr> <td>Gary Mountain</td> <td>21</td> <td>Mail</td> <td>5'8</td> <td>Alberta</td> <td>Curling</td> </tr> <tr> <td>James Camera</td> <td>31</td> <td>Male</td> <td>6'1</td> <td>British Columbia</td> <td>Hiking</td> </tr> </tbody> </table> </div> </div> </div>
body { font-family: 'Lato', sans-serif; } table { width: 100%; background: white; border-collapse: collapse; tr, th, td { border: none; border-bottom: 1px solid #e4ebeb; } th, td { padding: 10px 12px; text-align: left; } th { background: #56a2cf; color: #ffffff; text-transform: uppercase; } tr { td { background: #eaf3f5; color: #999999; } &:nth-of-type(2n+2) td { background: #ffffff; } } &.bt { tfoot { th, td { padding: 0; } } tbody td { padding: 0; } tfoot { th:before, td:before { background: #56a2cf; color: white; margin-right: 10px; padding: 2px 10px; } } tbody td:before { background: #56a2cf; color: white; margin-right: 10px; padding: 2px 10px; } tfoot { th .bt-content, td .bt-content { display: inline-block; padding: 2px 5px; } } tbody td .bt-content { display: inline-block; padding: 2px 5px; } tfoot { th:first-of-type { &:before, .bt-content { padding-top: 10px; } } td:first-of-type { &:before, .bt-content { padding-top: 10px; } } } tbody td:first-of-type { &:before, .bt-content { padding-top: 10px; } } tfoot { th:last-of-type { &:before, .bt-content { padding-bottom: 10px; } } td:last-of-type { &:before, .bt-content { padding-bottom: 10px; } } } tbody td:last-of-type { &:before, .bt-content { padding-bottom: 10px; } } } } /* Office css */ section { margin-bottom: 20px; padding: 15px; border: 1px solid red; background-color: #fff9e0; } .is { margin-bottom: 20px; } section:last-child, section .is:last-child, section p:last-child, section table:last-child, section ul:last-child { margin-bottom: 0 !important; } /* Office scss */ @import url('https://fonts.googleapis.com/css?family=Raleway'); $xs : "(min-width: 320px)"; // Extra Small $ms : "(min-width: 480px)"; // Midium Small $sm : "(min-width: 768px)"; // Small $md : "(min-width: 992px)"; // Medium $lg : "(min-width: 1200px)"; // Large body { font-family: 'Raleway', sans-serif; background-color: #ccc; font-size: 16px; } ul { list-style: none; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } // Border @mixin border($side: null, $color: white) { #{if($side, border-#{$side}, border)}: 1px solid $color; } // em $browser-context: 16; // Default @function em($pixels, $context: $browser-context) { @return #{$pixels/$context}em } // Bottom @mixin bottom($mb) { margin-bottom: em($mb); @media #{$md} { margin-bottom: em($mb + 10); } } .page-wrapper { background-color: #e8e8e8; } p { font-size: em(16); } header { @include bottom(20); padding: 15px 0; background-color: blue; color: white; } section { @include bottom(20); @include border(); //@include border(bottom, red); div.is { @include bottom(20); } &, div, p, table, ul { &:last-child { margin-bottom: 0 !important; } } } footer { padding: 15px 0; background-color: green; color: white; &, div, p, table, ul { &:last-child { margin-bottom: 0 !important; } } }
$(document).ready(function() { $('#table').basictable(); $('#table-breakpoint').basictable({ breakpoint: 768 }); $('#table-container-breakpoint').basictable({ containerBreakpoint: 485 }); $('#table-swap-axis').basictable({ swapAxis: true }); $('#table-force-off').basictable({ forceResponsive: false }); $('#table-no-resize').basictable({ noResize: true }); $('#table-two-axis').basictable(); $('#table-max-height').basictable({ tableWrapper: true }); });

Related: See More


Questions / Comments: