Using TH colspan to include multiple TD elements per column - html

Question

I'm attempting to create an HTML table that displays a list of vehicles down the page along with columns for each hour of the day. Within each hourly column I would like to display five bars of varying colors that indicate activity over 12 minute periods. This is an abbreviated version of my latest attempt showing the first two hours:
<table>
<thead>
<tr>
<th class="mobile_column" colspan="1">Mobile Name</th>
<th class="time_column" colspan="5">00</th>
<th class="time_column" colspan="5">01</th>
</tr>
</thead>
<tr>
<td class="mobile_column">Test</td>
<td class="no_data"> </td>
<td class="ignition_off"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
<td class="moving"> </td>
<td class="moving"> </td>
<td class="moving"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
</tr>
</table>
I'm using the following CSS to format each bar:
.no_data, .no_data_legend {
background-color: White;
}
.moving, .moving_legend {
background-color: Green;
}
.idling, .idling_legend {
background-color: Yellow;
}
.ignition_off, .ignition_off_legend {
background-color: Red;
}
.ignition_toggle, .ignition_toggle_legend {
background-color: Purple;
}
.no_data, .moving, .idling, .ignition_off, .ignition_toggle {
width: 5px;
height: 24px;
float: left;
display: inline-block;
padding: 0px 0px 0px 0px;
}
I'm fairly inexperienced in HTML layout but from my reading I was expecting that five of the bars should appear under each of the hourly headings and go across the page, however they all appear under the first hour and then wrap down the page.
I've posted a JSFiddle at http://jsfiddle.net/dKb6Z/2/ that contains the data for 24 hours that makes it more apparent. Any assistance including preferred alternative ways to format the data would be appreciated.

Answer 1

Remove
float: left;
display: inline-block;
from your CSS. It is destroying the standard table layout.
Working jsFiddle here.

Answer 2

Further to #winterblood's answer (sorry, unable to comment), if you are wanting to remove the padding from the cells (which I am assuming you were trying to do with the float + inline-block), you can add the following:
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
Fiddle

Answer 3

See this demo mate, I also added a dotted border so that you can see the 5 cells clearly, aligned under each hour. Also changed white color to grey as it's invisible on JS Fiddle default background.
Remember to include this table {border-collapse:collapse;}
Demo here: http://jsfiddle.net/Godinall/Tc2cx/1/