JSFiddle - React, Tailwind, and code Playground
by Douglas Crosby
HTML
<div id="content">
<table id="tblDay">
<tbody>
<tr class="date">
<td colspan="23">Tuesday, June 04, 2013</td>
</tr>
<tr class="head">
<td class="title">Resources</td>
<td>08:00</td>
<td>08:30</td>
<td>09:00</td>
<td>09:30</td>
<td>10:00</td>
<td>10:30</td>
<td>11:00</td>
<td>11:30</td>
<td>12:00</td>
<td>12:30</td>
<td>13:00</td>
<td>13:30</td>
<td>14:00</td>
<td>14:30</td>
<td>15:00</td>
<td>15:30</td>
<td>16:00</td>
<td>16:30</td>
<td>17:00</td>
<td>17:30</td>
<td>18:00</td>
<td>18:30</td>
</tr>
<tr id="mins">
<td>Mausami Pandit</td>
<td class="tbDay">
<div class="min_08:01">'</div>
<div class="min_08:02">'</div>
<div class="min_08:03">'</div>
<div class="min_08:04">'</div>
<div class="min_08:05">'</div>
<div class="min_08:06">'</div>
<div class="min_08:07">'</div>
<div class="min_08:08">'</div>
<div class="min_08:09">'</div>
<div class="min_08:10">'</div>
<div class="min_08:11">'</div>
<div class="min_08:12">'</div>
<div class="min_08:13">'</div>
<div class="min_08:14">'</div>
<div class="min_08:15">'</div>
<div class="min_08:16">'</div>
<div class="min_08:17">'</div>
<div class="min_08:18">'</div>
...
CSS
#content{
text-align:center;
min-height:690px;
}
table{
width:100%;
}
td{
width:4%;
}
.date{
background:#003366;
color:#ffffff;
}
.date td{
font-size:16px;
font-weight:bold;
text-align:center;
}
#mins{
background:silver;
}
.head{
background:#006699;
color:#ffffff;
font-size:14px;
}
.title{
width:10%;
}
.tbDay div{
display:inline-block;
width:0.1%;
}