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小时的数据，使其更加明显。任何帮助，包括格式化数据的首选替代方法，都将受到赞赏。

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

pandas生成新的累加数据列、pandas生成新的累加数据列（数据列中包含NaN的情况）、pandas计算整个dataframe的所有数据列的累加
pandas生成新的累加数据列.pandas生成新的累加数据列(数据列中包含NaN的情况).pandas计算整个dataframe的所有数据列的累加目录
html自动增加一行并获取行号,javascript开发系列(table操作，table增加一行，删除一行，取行号，列号)...
增加删除:insertRow,deleteRow, insertCell,deleteCell, 行号,列号:rowIndex ,cellIndex. 实例: 无标题页 table { backgro ...
python中删除unnamed_python-删除包含NaN,NaT和nans的任何列的行
目前,我的数据如下: df_all.head() Out[2]: Unnamed: 0 Symbol Date Close Weight 0 4061 A 2016-01-13 36.515889 ( ...
mysql 虚拟列索引_使用MySQL 5.7虚拟列提高查询效率
原标题:使用MySQL 5.7虚拟列提高查询效率导读翻译团队:星耀队@知数堂团队成员:星耀队-芬达,星耀队-顺子,星耀队-M哥原文出处:https://www.percona.com/blog ...
数据库SQL实战11_获取员工其当前的薪水比其manager当前薪水还高的相关信息，当前表示to_date=‘9999-01-01‘, 结果第一列给出员工的emp_no，第二列给出其manager
题目获取员工其当前的薪水比其manager当前薪水还高的相关信息,当前表示to_date='9999-01-01', 结果第一列给出员工的emp_no, 第二列给出其manager的manager_ ...
oracle 表列自增,ORACLE表建立自增列
create tablespace studentDB datafile 'E:\datafiles_1.dbf' size 10m; create user Huang_Ying_Bo identi ...
python 新建一列_python – 如何处理列名称和创建新列
这是我的pandas DataFrame,带有原始列名. old_dt_cm1_tt old_dm_cm1 old_rr_cm2_epf old_gt 1 3 0 0 2 1 1 5 >首先,我 ...
mysql聚集索引可以多列吗_MySQL使用单列索引和多列索引
讨论MySQL选择索引时单列单列索引和多列索引使用,以及多列索引的最左前缀原则. 1. 单列索引在性能优化过程中,选择在哪些列上创建索引是最重要的步骤之一.可以考虑使用索引的主要有两种类型的列:在W ...
numpy 若干行和列_Numpy的轴，pandas的行和列
使用幕布做了一系列详细笔记请点击: 高维ndarray的轴轴编号和索引傻傻分不清楚很多函数需要传入轴编号,非常容易和索引弄混,以3维数组为例,轴有3条,编号分别为 0,1,2 我们制造一个3×3×3 ...
python dataframe 列_python pandas库中DataFrame对行和列的操作实例讲解
用pandas中的DataFrame时选取行或列: import numpy as np import pandas as pd from pandas import Sereis, DataFram ...

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

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

最新文章

热门文章