Mark Beattie Mark Beattie - 2 months ago 9
CSS Question

Offset table columns in css

How can I achieve the following look with HTML and CSS:
enter image description here

It's basically a timeline within a table, with times below the column.

I was thinking something like the below would work (please click on the code snippet) or somehow offset the second row to the right so I can then center the text for the dates.

Any help would be most appreciated.



#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

Correct cellpadding, and 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>