Div Misalignment Inside of table - html

Question

I'm having some issues with lining up similarly sized divs inside a td Chrome inspector confirms pixel size is the same. Trying to do a scheduler demo. Any ideas how to fix the alignment issue would be great! thanks!
I'll admit the small picture doesn't look like much, but it's there and over the length of 24 hours, it's certainly looks off.
I've played with inspector for the last hour, but just can't find it!
My Html code snippet...
<table>
<tbody>
<tr>
<td class="text-right ">
<div class="time_label">6am</div>
<div class="time_label">7am</div>
<div class="time_label">8am</div>
<div class="time_label">9am</div>
<div class="time_label">10am</div>
<div class="time_label">11am</div>
<div class="time_label">12pm</div>
<div class="time_label">1pm</div>
<div class="time_label">2pm</div>
<div class="time_label">3pm</div>
<div class="time_label">4pm</div>
<div class="time_label">5pm</div>
<div class="time_label">6pm</div>
<div class="time_label">7pm</div>
<div class="time_label">8pm</div>
<div class="time_label">9pm</div>
</td>
<td class="area area1">
<div class="block block1"></div>
<div class="block block2"></div>
My Sass snippet, this is inside of a bootstrap row/col-md-12...
$booker-container-height: 618px;
$booker-table-margin: 10px;
$booker-height: $booker-container-height - $booker-table-margin;
.booker_wrapper {
box-shadow: 0 0 12px #888;
}
.booker {
table {
margin: $booker-table-margin;
height: $booker-height;
table-layout: fixed;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.time_label {
height: $booker-height/16;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
}
.block {
height: $booker-height/32;
border-left: 1px solid #DDD;
}
.area:last-child{
border-right: 1px solid #DDD;
}
.area>.block:first-child
{
border-top: 1px solid #DDD;
}
.area>.block:nth-child(even)
{
border-bottom: 1px solid #DDD;
}
.area>.block:nth-child(odd)
{
border-bottom: 1px solid #DDD;
}
}

Answer 1

You should used the amazing css property box-sizing: border-box; supporting by IE8 to! Then set the height's items of left column at the double of the right and an border-bottom for each, like:
html:
<table>
<tr>
<th>
<div>Hello</div>
<div>Heros</div>
</th>
<td>
<div>World</div>
<div>Toto</div>
<div>Batman</div>
<div>Superman</div>
</td>
</tr>
</table>
scss:
* {
#include box-sizing(border-box);
}
$dark: #202020;
table {
border: 1px solid $dark;
border-bottom: 0;
}
th {
div {
height: 60px;
border-bottom: 1px solid $dark;
border-right: 1px solid $dark;
}
}
td {
div {
height: 30px;
border-bottom: 1px solid $dark;
}
}
I made a codepen here: http://codepen.io/pik_at/pen/qEKKBy