html table th 一列包含多列,使用TH colspan每列包含多个TD元素

我正在尝试创建一个HTML表格，该表格显示页面下方的车辆列表以及当天每小时的列数。在每小时列中，我想显示五个不同颜色的条，表示12分钟时段内的活动。这是我最近一次尝试显示前两个小时的缩写版本：

Mobile Name0001

Test          

我正在使用以下CSS格式化每个栏：

.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;

}

我在HTML布局方面相当缺乏经验但是从我的阅读中我看到每个小时标题下面会出现五个条形并穿过页面，但它们都出现在第一个小时之后然后将其包裹起来页。

我在http://jsfiddle.net/dKb6Z/2/发布了一个JSFiddle，其中包含24小时的数据，使其更加明显。任何帮助，包括格式化数据的首选替代方法，都将受到赞赏。