Question

我正在尝试创建一个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">&nbsp;</td>
        <td class="ignition_off">&nbsp;</td>
        <td class="no_data">&nbsp;</td>
        <td class="no_data">&nbsp;</td>
        <td class="no_data">&nbsp;</td>
        <td class="moving">&nbsp;</td>
        <td class="moving">&nbsp;</td>
        <td class="moving">&nbsp;</td>
        <td class="no_data">&nbsp;</td>
        <td class="no_data">&nbsp;</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小时的数据，使其更加明显。任何帮助，包括格式化数据的首选替代方法，都将受到赞赏。

Answer 1

删除

float: left;
display: inline-block;

来自你的CSS

。它正在摧毁标准的表格布局。

使用jsFiddle here。

Answer 2

继@ winterblood的回答（抱歉，无法评论），如果你想从单元格中删除填充（我假设你试图用float + inline-block），您可以添加以下内容：

table {
    border-collapse: collapse;   
}
th, td {
    padding: 0;
}

Fiddle

Answer 3

看到这个演示伙伴，我还添加了一个虚线边框，这样你就可以清楚地看到5个单元格，每小时对齐一次。还将白色变为灰色，因为它在JS Fiddle默认背景下不可见。

请记住包含此table {border-collapse:collapse;}

Demo here: http://jsfiddle.net/Godinall/Tc2cx/1/

使用TH colspan每列包含多个TD元素

3 个答案: