<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>Clinician Name</th> <th>Team</th> <th>Clinician Phone</th> <th>Clinician Discipline</th> <th>Patient Name</th> <th>Patient Address</th> <th>Patient Phone</th> <th>Visit Date</th> <th>Recert Date</th> <th>Last Visit Date</th> <th>Last Visit Comment</th> <th>Last Patient Comment</th> <th>Primary Physician</th> <th>Physician Phone</th> <th>Physician Fax</th> </tr> </thead> <tbody> <tr> <td data-title="Clinician Name">Nurse Nancy</td> <td data-title="Team">Team ABC</td> <td data-title="Clinician Phone">555-658-8854</td> <td data-title="Clinician Discipline">OT</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="Visit Date">11/20/14</td> <td data-title="Recert Date">11/26/14</td> <td data-title="Last Visit Date">11/30/14</td> <td data-title="Last Visit Comment">Here's the latest visit comment about their medical condition at the visit.</td> <td data-title="Last Patient Comment">Here's the latest patient comment about the patient's preferences</td> <td data-title="Primary Physician">Dr. Donald Duck</td> <td data-title="Physician Phone">555-872-1000</td> <td data-title="Physician Fax">555-333-4124</td> </tr> <tr> <td data-title="Clinician Name">Jill Julie</td> <td data-title="Team">Team DEF</td> <td data-title="Clinician Phone">555-600-8854</td> <td data-title="Clinician Discipline">RN</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="Visit Date">12/01/14</td> <td data-title="Recert Date">12/15/14</td> <td data-title="Last Visit Date">12/19/14</td> <td data-title="Last Visit Comment">Some more visit comments</td> <td data-title="Last Patient Comment">Some more patient comments</td> <td data-title="Primary Physician">Dr. Minnie Mouse</td> <td data-title="Physician Phone">555-667-6010</td> <td data-title="Physician Fax">555-012-3300</td> </tr> <tr> <td data-title="Clinician Name">Adam Backworth</td> <td data-title="Team">Team XYZ</td> <td data-title="Clinician Phone">555-999-8854</td> <td data-title="Clinician Discipline">HHA</td> <td data-title="Patient Name">Jimbo Bob</td> <td data-title="Address">300 Coyote St, Milwaukee, 53511</td> <td data-title="Patient Phone">555-321-6632</td> <td data-title="Visit Date">12/20/14</td> <td data-title="Recert Date">12/26/14</td> <td data-title="Last Visit Date">12/30/14</td> <td data-title="Last Visit Comment">And one more comments.</td> <td data-title="Last Patient Comment">The patient really enjoys xyzs</td> <td data-title="Primary Physician">Dr. Oz</td> <td data-title="Physician Phone">555-661-1000</td> <td data-title="Physician Fax">555-661-4124</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>