Display cell below previous cell

Question

I have a structure per the following:

<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>x</td>
        <td>y</td>
        <td>z</td>
    </tr>
</table>

And, using CSS, I want to see this following result (without visible borders):

+---+---+
| a | b |
|   | c |
+---+---+
| x | y |
|   | z |
+---+---+

To elaborate on my motivation: The table is an overview of job history, and the columns are period, position, and employer. I want to put the employer below the position for readability.

Answer 1

You cannot do this with CSS using the normal table layout. Table elements have special display properties (table, table-row, etc), but you can reset them to block to make them act like normal boxes (like a div, you know):

table, tbody, tr, td { 
    display: block; 
}

and then build your own structure, an example with floats:

tr { 
    overflow: hidden; 
}

td {
    margin-left: 100px;
}

td:first-child {
    float: left;
    margin: 0;
    width: 100px;
}

jsFiddle Demo

This way you can preserve your semantic information, but style it according to your special needs.