How to achieve this table layout with CSS? - html

Question

EDIT 2: I'm talking about the layout of the table, not the colours.
I need to style my table so that it appears as such:
The idea is to have the first th td pair on top and the rest should be in line under it.
Is that feasible through CSS?
I don't have control over the HTML here so CSS is my only option.
Edit:
Here's the HTML
<div class="content">
<table>
<thead>
<tr>
<th class="thtitle" >
Title </th>
<th class="thvalue" >
Value </th>
<th class="thquantity" >
Quantity </th>
<th class="thsum" >
Sum </th>
</tr>
</thead>
<tbody>
<tr class="first">
<td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>
</tr>
<tr class="last">
<td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>
</tr>
</tbody>
</table>
</div>

Answer 1

Edit 2:
I've added a fiddle that does exactly what you want, but be warned that nth-child doesnt play nice in IE8. It also assumes that the HTML you gave us is ALWAYS that way [ie always has the same amount of th/td's].
http://jsfiddle.net/8awAj/
Edit:
Is the html you posted ALWAYS like that? Ie never any more or less headings etc?
This isn't 100% what you want, but its kind of close. To get exactly what you want you would have to do a LOT of manual absolute positioning using :nth-child which would be horrible.
http://jsfiddle.net/9JWpA/
table {
width: 100%;
padding-top: 40px;
position: relative;
}
th {
background: yellow;
}
td {
background: green;
}
th,
td {
top: 40px;
width: 16.666%;
position: absolute;
}
th:first-child,
td:first-child {
width: 100%;
top: 0;
left: 0;
}
td:first-child {
top: 20px;
}
th:nth-child(2) {
left: 0;
}
td:nth-child(2) {
left: 16.666%;
}
th:nth-child(3) {
left: 33.333%;
}
td:nth-child(3) {
left: 49.998%;
}
th:nth-child(4) {
left: 66.666%;
}
td:nth-child(4) {
left: 83.33%;
}

Answer 2

try this..
http://jsfiddle.net/9JWpA/
html:
<table cellspacing=0;>
<tr><th colspan="6">th</th></tr>
<tr><td colspan="6">td</td></tr>
<tr><th>th</th><td>td</td><th>th</th><td>td</td><th>th</th><td>td</td></tr>
</table>
css:
table
{
width:200px;
border:1px solid black;
text-align:left;
}
th
{
background:yellow;
}
td
{
background:green;
}