<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>GreyHawk 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" style="text-align:center">00:00</th>
<td></td>
<td class="team-blue"></td>
<td class="team-blue"></td>
<td class="team-blue"></td>
<td class="team-both"></td>
<td class="team-blue"></td>
<td></td>
</tr>
<tr>
<th scope="row" style="text-align:center">00:30</th>
<td></td>
<td class="team-blue"></td>
<td class="team-blue"></td>
<td class="team-blue"></td>
<td class="team-both"></td>
<td class="team-blue"></td>
<td></td>
</tr>
<tr>
<th scope="row" style="text-align:center">01:00</th>
<td></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td></td>
</tr>
<tr>
<th scope="row" style="text-align:center">01:30</th>
<td></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td></td>
</tr>
<tr>
<th scope="row" style="text-align:center">02:00</th>
<td></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td></td>
</tr>
<tr>
<th scope="row" style="text-align:center">02:30</th>
<td></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td class="timetable-workout"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!-- timetable -->
</div>
</div>
</div>
<!-- /.time-table -->
.timetable-workout>.t_green
{
background-color: #439A86;
}
.timetable { }
.team-blue { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; background-color: #222E50; font-weight: 700; font-family: 'Oswald', sans-serif; }
.team-blue,.timetable.table>tbody>tr>td { color: #fff; }
.team-green { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; background-color: #439A86; font-weight: 700; font-family: 'Oswald', sans-serif; }
.team-green,.timetable.table>tbody>tr>td { color: #fff; }
.team-both
{
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
background: rgb(34,46,80);
background: linear-gradient(180deg, rgba(34,46,80,1) 0%, rgba(67,154,134,1) 100%);
font-weight: 700;
font-family: 'Oswald', sans-serif;
}
.team-both,.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;}
