0

我正在尝试创建一个 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 小时的数据，使其更加明显。任何帮助，包括格式化数据的首选替代方法，将不胜感激。

4

3 回答 3

2

消除

float: left;
display: inline-block;

来自你的 CSS。它正在破坏标准的表格布局。

在这里工作 jsFiddle 。

于 2013-11-12T04:38:36.167 回答
1

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

记得包括这个table {border-collapse:collapse;}

在这里演示：http://jsfiddle.net/Godinall/Tc2cx/1/

于 2013-11-12T05:07:54.827 回答
1

除了@winterblood 的回答（对不起，无法评论），如果您想从单元格中删除填充（我假设您正在尝试使用 float + inline-block），您可以添加以下内容：

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

小提琴

于 2013-11-12T04:49:55.000 回答