<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <!-- time-table --> <div class="content"> <div class="container"> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center mb30"> <h2>GYM TIMETABLE</h2> </div> <div class="table-responsive"> <table class="timetable table table-striped "> <thead> <tr class="text-center"> <th scope="col"></th> <th scope="col">Monday</th> <th scope="col">Tuesday</th> <th scope="col">Wednesday</th> <th scope="col">Thursday</th> <th scope="col">Friday</th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> </thead> <tbody> <tr> <th scope="row">06:00 Am - 07:00 Am</th> <td></td> <td></td> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">07:00 Am - 08:00 Am</th> <td></td> <td></td> <td class="timetable-workout">Classes Name</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">08:00 Am - 09:00 Am</th> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">09:00 Am - 10:00 Am</th> <td class="timetable-workout">Classes Name</td> <td class="timetable-workout">Classes Name</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">10:00 Am - 11:00 Am</th> <td></td> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td></td> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td></td> <td></td> </tr> <tr> <th scope="row">11:00 Am - 12:00 Am</th> <td></td> <td class="timetable-workout">Classes Name</td> <td></td> <td class="timetable-workout">Classes Name</td> <td class="timetable-workout">Classes Name</td> <td></td> <td></td> </tr> <tr> <th scope="row">12:00 Am - 01:00 Am</th> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">01:00 Am - 02:00 Am</th> <td class="timetable-workout">Classes Name</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">02:00 Am - 03:00 Am</th> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td></td> <td></td> <td></td> <td></td> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td></td> </tr> <tr> <th scope="row">03:00 Am - 04:00 Am</th> <td class="timetable-workout">Classes Name</td> <td></td> <td></td> <td></td> <td></td> <td class="timetable-workout">Classes Name</td> <td></td> </tr> <tr> <th scope="row">04:00 Am - 05:00 Am</th> <td></td> <td></td> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm</td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">05:00 Am - 06:00 Am</th> <td></td> <td></td> <td class="timetable-workout">Classes Name</td> <td class="timetable-workout">Classes Name</td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">06:00 Am - 07:00 Am</th> <td></td> <td class="timetable-workout">30 MINUTES <br> 12:35 pm - 01:05 pm <br>Classes Name</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> <!-- timetable --> </div> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center mt-4"> Created for <a href="https://easetemplate.com/downloads/fitness-website-template/" target="_blank" class="text-primary">easetemplate</a> </div></div> </div> </div> <!-- /.time-table -->

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Roboto', sans-serif; letter-spacing: 0px; font-size: 16px; color: #94999e; font-weight: 400; line-height: 28px; } h1, h2, h3, h4, h5, h6 { color: #222528; margin: 0px 0px 15px 0px; font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 2px; } h1 { font-size: 36px; } h2 { font-size: 32px; line-height: 38px; } h3 { font-size: 20px; line-height: 32px; } h4 { font-size: 18px; } h5 { font-size: 14px; line-height: 27px; } h6 { font-size: 12px; } p { margin: 0 0 20px; line-height: 1.7; } p:last-child { margin: 0px; } ul, ol { font-family: 'Roboto', sans-serif; } a { text-decoration: none; color: #94999e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #ee0c19; } .timetable { } .timetable-workout { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; background-color: #ee0c19; font-weight: 700; font-family: 'Oswald', sans-serif; } .timetable-workout,.timetable.table>tbody>tr>td { color: #fff; } .timetable,.table>tbody>tr>th { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-family: 'Oswald', sans-serif; } .timetable,.table>thead>tr>th { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-family: 'Oswald', sans-serif; } .table { width: 100%; max-width: 100%; margin-bottom: 1rem; } .box-table { padding: 16px 30px; margin: 0 -15px 15px; border-color:; border: 1px solid #eee; } .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { border-top: transparent; color: #26282c; border-bottom: 1px solid #eee; } .table thead th { vertical-align: bottom; border-bottom: 2px solid #eee; } .table-striped tbody tr:nth-of-type(odd) { background-color: hsl(224, 100%, 99%); } caption { padding-top: .75rem; padding-bottom: .75rem; color: #26282c; text-align: left; caption-side: bottom; } .mb30{margin-bottom:30px;}