JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div>
    <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>
                <th class="time_column" colspan="5">02</th>
                <th class="time_column" colspan="5">03</th>
                <th class="time_column" colspan="5">04</th>
                <th class="time_column" colspan="5">05</th>
                <th class="time_column" colspan="5">06</th>
                <th class="time_column" colspan="5">07</th>
                <th class="time_column" colspan="5">08</th>
                <th class="time_column" colspan="5">09</th>
                <th class="time_column" colspan="5">10</th>
                <th class="time_column" colspan="5">11</th>
                <th class="time_column" colspan="5">12</th>
                <th class="time_column" colspan="5">13</th>
                <th class="time_column" colspan="5">14</th>
                <th class="time_column" colspan="5">15</th>
                <th class="time_column" colspan="5">16</th>
                <th class="time_column" colspan="5">17</th>
                <th class="time_column" colspan="5">18</th>
                <th class="time_column" colspan="5">19</th>
                <th class="time_column" colspan="5">20</th>
                <th class="time_column" colspan="5">21</th>
                <th class="time_column" colspan="5">22</th>
                <th class="time_column" colspan="5">22</th>
                <th class="time_column" colspan="5">23</th>
            </tr>
        </thead>
        <tr>
            <td class="mobile_column">Test</td>
            <td class="no_data">&nbsp;</td>
            <td class="no_data">&nbsp;</td>
            <td class="no_data">&nbsp;</td>
            <td class="no_data">&nbsp;</td>
            <td class="no_data">&nbsp;</td>
            <td class="no_data">&nbsp;</td>
            <td...

CSS

*{margin:0 auto;}
table {border-collapse:collapse;}
td th {display:inline-block;}
.no_data, .no_data_legend {
    background-color: Grey;
}
.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;
    padding: 0px 0px 0px 0px;
    border-right:dotted 1px #ccc;
}
th.mobile_column, td.mobile_column {
    width: 200px;
    border:dotted 1px #ccc;
}
th.time_column, td.time_column {
    width: 30px;
    border:dotted 1px #ccc;
}