<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="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center"> <!--No more tables.--> </h1> <h3 class="text-center"> <!--Resize the browser screen to see how the table changes--> </h3> </div> <div id="no-more-tables"> <table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th>Evac Zone</th> <th>Team</th> <th>Patient Name</th> <th>Patient Address</th> <th>Patient Phone</th> <th>Date of Birth</th> </tr> </thead> <tbody> <tr> <td data-title="Evac Zone">A</td> <td data-title="Team">Team ABC</td> <td data-title="Patient Name">Patient Pat</td> <td data-title="Address">1452 Main St, Milwaukee, 53511</td> <td data-title="Patient Phone">101-880-0250</td> <td data-title="Date of Birth">11/20/54</td> </tr> <tr> <td data-title="Evac Zone">C</td> <td data-title="Team">Team DEF</td> <td data-title="Patient Name">Jimi Hendrix</td> <td data-title="Address">991 Wisconsin Ave, Milwaukee, 53511</td> <td data-title="Patient Phone">665-556-8870</td> <td data-title="Date of Birth">12/01/65</td> </tr> <tr> <td data-title="Evac Zone">--</td> <td data-title="Team">Team ZZZ</td> <td data-title="Patient Name">Frank Sinatra</td> <td data-title="Address">6888 Oak Leaf St, Milwaukee, 53511</td> <td data-title="Patient Phone">665-556-8870</td> <td data-title="Date of Birth">10/15/84</td> </tr> </tbody> </table> </div> </div> <div class="row"> <p class="bg-success" style="padding:10px;margin-top:20px"><small><a href="http://elvery.net/demo/responsive-tables/#no-more-tables" target="_blank">Link</a> to original article</small></p> </div> </div>