Использование TH colspan для включения нескольких элементов TD в столбец

Question

Использование TH colspan для включения нескольких элементов TD в столбец

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, но из моего чтения я ожидал, что пять из баров должны появиться под каждым часовым заголовком и перейти через страницу, однако все они появляются в первый час, а затем завершают страницу.

Я разместил JSFiddle в http://jsfiddle.net/dKb6Z/2/, который содержит данные в течение 24 часов, что делает его более очевидным. Любая помощь, включая предпочтительные альтернативные способы форматирования данных, будет оценена по достоинству.

PeterJ 12 нояб. 2013, в 05:43

Источник

0

Я думаю, что ваш float: left и display: inline-block может быть причиной проблемы здесь. jsfiddle.net/dKb6Z/3
davidpauljunior 12 нояб. 2013, в 04:38

Теги:

html

css

html-table

3 ответа

1

См. Этот демонстрационный помощник, я также добавил пунктирную границу, чтобы вы могли четко видеть 5 ячеек, выровненных под каждым часом. Также был изменен белый цвет на серый, поскольку он невидим на фоне фона JS Fiddle.

Не забудьте включить эту table {border-collapse:collapse;}

Демо здесь: http://jsfiddle.net/Godinall/Tc2cx/1/

Godinall 12 нояб. 2013, в 03:11

0

Ура, что выглядит потрясающе.
PeterJ 12 нояб. 2013, в 05:17

1

В дополнение к ответу @winterblood (извините, не удалось прокомментировать), если вы хотите удалить прописку из ячеек (что я предполагаю, что вы пытались сделать с float + inline-block), вы можете добавить следующее:

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

скрипка

scottgearyau 12 нояб. 2013, в 02:39

0

Спасибо, что вы читатель разума, просто делал это сейчас.
PeterJ 12 нояб. 2013, в 04:50

Ещё вопросы

Я думаю, что ваш float: left и display: inline-block может быть причиной проблемы здесь. jsfiddle.net/dKb6Z/3
Спасибо, что вы читатель разума, просто делал это сейчас.

Ken Herbert · Accepted Answer · 2013-11-12T03-08-00.000Z

Удалить

float: left;
display: inline-block;

из вашего CSS. Это разрушает стандартную раскладку таблицы.

Рабочая jsFiddle здесь.