<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<div id='container'>
<div class='widget'>
<div id='morning' class="tab-content">
<table class="group-table">
<caption>Morning Group Classes</caption>
<thead>
<tr>
<th>Hours / week</th>
<th>Class schedule</th>
<th>Time</th>
<th>Course length</th>
<th>Total classes</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Tues & Thurs</td>
<td class="align-bottom">9:30-10:20</td>
<td>12 weeks</td>
<td>48 classes</td>
<td>2700 RMB</td>
</tr>
<tr>
<td>6</td>
<td>Mon, Wed & Fri</td>
<td>&</td>
<td>8 weeks</td>
<td>48 classes</td>
<td>2650 RMB</td>
</tr>
<tr>
<td>10</td>
<td>Mon - Fri</td>
<td class="align-top">10:30-11:20</td>
<td>5 weeks</td>
<td>50 classes</td>
<td>2600 RMB</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='widget'>
<div id='afternoon' class="tab-content">
<table class="group-table">
<caption>Afternoon Group Classes</caption>
<thead>
<tr>
<th>Hours / week</th>
<th>Class schedule</th>
<th>Time</th>
<th>Course length</th>
<th>Total classes</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Tues & Thurs</td>
<td class="align-bottom">14:30-15:20</td>
<td>12 weeks</td>
<td>48 classes</td>
<td>2700 RMB</td>
</tr>
<tr>
<td>6</td>
<td>Mon, Wed & Fri</td>
<td>&</td>
<td>8 weeks</td>
<td>48 classes</td>
<td>2650 RMB</td>
</tr>
<tr>
<td>10</td>
<td>Mon - Fri</td>
<td class="align-top">15:30-16:20</td>
<td>5 weeks</td>
<td>50 classes</td>
<td>2600 RMB</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='widget'>
<div id='evening' class="tab-content">
<table class="group-table">
<caption>Evening Group Classes</caption>
<thead>
<tr>
<th>Hours / week</th>
<th>Class schedule</th>
<th>Time</th>
<th>Course length</th>
<th>Total classes</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Tues & Thurs</td>
<td class="align-bottom">18:00-18:50</td>
<td>12 weeks</td>
<td>48 classes</td>
<td>2700 RMB</td>
</tr>
<tr>
<td>6</td>
<td>Mon / Wed / Fri</td>
<td>&</td>
<td>8 weeks</td>
<td>48 classes</td>
<td>2650 RMB</td>
</tr>
<tr>
<td>10</td>
<td>Mon - Fri</td>
<td class="align-top">19:00-19:50</td>
<td>5 weeks</td>
<td>50 classes</td>
<td>2600 RMB</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='widget'>
<div id='weekend' class="tab-content">
<table class="group-table">
<caption>Weekend Group Classes</caption>
<thead>
<tr>
<th>Hours / week</th>
<th>Days</th>
<th>Time</th>
<th>Course length</th>
<th>Total classes</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td></td>
<td>10:00-10:50<br>11:00-11:50</td>
<td>12 weeks</td>
<td>48 classes</td>
<td>2700 RMB</td>
</tr>
<tr>
<td>6</td>
<td>Sat & Sun</td>
<td>10:00-10:50<br>11:00-11:50<br>13:00-13:50<br>14:00-14:50</td>
<td>8 weeks</td>
<td>48 classes</td>
<td>2650 RMB</td>
</tr>
<tr>
<td>10</td>
<td></td>
<td>9:30-10:20<br>10:30-11:20</td>
<td>5 weeks</td>
<td>50 classes</td>
<td>2600 RMB</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- End of container -->
* {
box-sizing: border-box;
}
body{
background-color: #fff;
text-align: center;
font-family: 'Source Sans Pro', Helvetica;
}
#container{
margin: 100px auto;
width: 90%;
text-align: left;
position: relative;
}
.widget{
background-color: #fff;
font: 11pt Georgia,Times,serif;
color: #333;
padding: 7px;
/*margin: 20px;*/
width: 100%;
}
.widget ul{
list-style-position: inside;
}
.widget h5{
font-size: 14pt;
margin: 5px;
}
.new-widget{
margin: 0px;
border: 1px solid #ddd;
border-top: 0;
background-color: #fff;
/*padding: 7px;*/
width: 100%;
clear: both;
}
.new-widget ul{
display: none;
}
.tab-wrapper{
/* margin-left: 1px; */
width: 1000px;
padding: 0;
/* height: 0px; */
/* background: #1abc9c; */
}
.tab{
/* width: 100px;*/
padding: 8px 10px;
margin-right: 5px;
font-size: 0.9em;
/* border: 1px solid red; */
border-radius: 10px 10px 0 0;
/* height: 33px; */
float: left;
background: #eee;
text-transform: capitalize;
color: #333;
text-align: center;
/* line-height: 2.0em; */
cursor: pointer;
list-style: none!important;
transition: all 200ms;
/* border-right: 0.125rem solid #16a085; */
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.tab:hover {
background: #f0554a;
color: #fff;
}
.active-tab{
background: #f0554a;
color: #fff;
}
.active-tab:hover {
}
.tab-content {
padding: 0 0;
}
/* TABLE STYLING */
.group-table caption {
background:#f0554a;
color: #fff;
padding: 8px;
font-size: 1.4em;
}
.group-table {
border-top: 1px solid #ddd;
width:100%;
/* border:1px solid #ddd; */
/* border-top: none; */
border-collapse:collapse;
padding:5px;
text-align: center;
}
.group-table th {
/* border:1px solid #ddd;
border-top: none; */
padding: 10px 5px;
font-weight: normal;
background:#f0554a;
color: #fff;
}
.group-table td {
/* border:1px solid #ddd; */
padding:10px 2px;
}
td:nth-child(3) {
/* min-width: 90px; */
}
.group-table th, .group-table td {
border-right: 1px solid #ddd;
}
.group-table th:last-child, .group-table td:last-child {
border-right: none;
}
.group-table tr:nth-child(odd) {
background: #f0f0f0;
}
#morning .group-table td:nth-child(3) {
background: #fff;
}
.group-table td.align-bottom {
vertical-align: bottom;
padding: 0;
}
.group-table td.align-top {
vertical-align: top;
padding: 0;
}
#morning .group-table td:nth-child(3), #afternoon .group-table td:nth-child(3), #evening .group-table td:nth-child(3) {
background: #fff;
}
#weekend .group-table td:nth-child(2) {
background: #fff;
}
$(document).ready(function(){
var newWidget="<div class='widget-wrapper'> <ul class='tab-wrapper'></ul> <div class='new-widget'></div></div>";
$(".widget").hide();
$(".widget:first").before(newWidget);
$(".widget > div").each(function(){
$(".tab-wrapper").append("<li class='tab'>"+this.id+"</li>");
$(this).appendTo(".new-widget");
});
$(".tab").click(function(){
$(".new-widget > div").hide();
$('#'+$(this).text()).show();
$(".tab").removeClass("active-tab");
$(this).addClass("active-tab");
});
$(".tab:first").click();
});
External CSS
This Pen doesn't use any external CSS resources.