How to achieve this table layout with CSS?

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;
}