0

ページの下にある車両のリストと、1 日の各時間の列を表示する HTML テーブルを作成しようとしています。1 時間ごとの各列内に、12 分間のアクティビティを示すさまざまな色の 5 つのバーを表示したいと考えています。これは、最初の 2 時間を示す私の最新の試みの短縮版です。

<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 レイアウトにかなり慣れていませんが、私の読書から、1 時間ごとの見出しの下に 5 つのバーが表示され、ページ全体に表示されるはずであると予想していましたが、それらはすべて最初の 1 時間の下に表示され、ページを折り曲げます。

http://jsfiddle.net/dKb6Z/2/に JSFiddle を投稿しました。これには、24 時間のデータが含まれているため、より明確になります。データをフォーマットするための好ましい代替方法を含む支援をいただければ幸いです。

4

3 に答える 3

1

@winterbloodの回答（申し訳ありませんが、コメントできません）に加えて、セルからパディングを削除したい場合（フロート+インラインブロックでやろうとしていたと仮定しています）、次を追加できます：

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

フィドル

于 2013-11-12T04:49:55.000 に答える