Offset столбцы таблицы в CSS

Question

Как я могу достигнуть следующий вид с HTML и CSS:

Это в основном график в таблице, с раз ниже колонны.

Я думал, что что-то вроде ниже будет работать (пожалуйста, нажмите на фрагмент кода) или каким-то образом смещайте вторую строку вправо, чтобы затем смонтировать текст для дат.

Любая помощь была бы очень признательна.

#table1 { 
 
    width: 100%; 
 
    color: #555; 
 
    position: relative; 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
    height: 100%; 
 
} 
 

 
#table1 td, 
 
#table1 th { 
 
    border: 1px solid #E4E4E4; 
 
}

<table id="table1"> 
 
<tr> 
 
    <td>1 
 
    </td> 
 
    <td>2 
 
    </td> 
 
    <td>3 
 
    </td> 
 
</tr> 
 
    <tr> 
 
    <td colspan="1.5">1 
 
    </td> 
 
    <td colspan="1.5">2 
 
    </td> 
 
</tr> 
 
</table>

Answer 1

Правильная CELLPADDING и CELLSPACING :)

#table0 { 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
#table1 td:nth-child(odd) { 
 
    border-right: 1px solid #000; 
 
} 
 

 
#table2 { 
 
    text-align: center; 
 
} 
 

 
.blue { 
 
    color: blue; 
 
} 
 

 
.first{ 
 
    border-right: 1px solid green 
 
}

<table id="table0"> 
 
    <colgroup> 
 
     <col width="50"></col> 
 
     <col width="100"></col> 
 
     <col width="100"></col> 
 
     <col width="100"></col> 
 
     <col width="100"></col> 
 
     <col width="100"></col> 
 
    </colgroup> 
 
    <tr> 
 
     <td class="first">00:05</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
</table> 
 

 
<table id="table1"> 
 
    <colgroup> 
 
     <col width="50"></col> 
 
     <col width="50"></col> 
 
     <col width="50"></col> 
 
     <col width="50"></col> 
 
     <col width="50"></col> 
 
     <col width="50"></col> 
 
     <col width="50"></col> 
 
     <col width="50"></col> 
 
     <col width="50"></col> 
 
    </colgroup> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
</table> 
 

 
<table id="table2"> 
 
    <colgroup> 
 
     <col width="100"></col> 
 
     <col width="100"></col> 
 
     <col width="100"></col> 
 
     <col width="100"></col> 
 
     <col width="100"></col> 
 
    </colgroup> 
 
    <tr> 
 
     <td>01:00 <BR> <span class="blue">03/27</span></td> 
 
     <td>&nbsp;</td> 
 
     <td>02:00</td> 
 
     <td>&nbsp;</td> 
 
     <td>03:00</td> 
 
    </tr> 
 
</table>