我正在尝试创建一个 HTML 表格,该表格在页面下方显示车辆列表以及一天中每个小时的列。在每个小时列中,我想显示五个不同颜色的条形图,表示 12 分钟内的活动。这是我最近尝试显示前两个小时的缩写版本:
<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>
我正在使用以下 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 小时的数据,使其更加明显。任何帮助,包括格式化数据的首选替代方法,将不胜感激。