[css-d] Table with expanding detail rows

[dimpie]

Hi,
In a table I have detailrows which appear when you click on a regular row in 
the table. The amount of table cells in the detail row is not equal to the 
amount of table cells in the regular rows. Besides that I want to give the 
tablecells in the detail row different widths than the tablecells in the 
regular rows.

What I did is create a details table row <tr> with a classname details, and 
give the table cells different widths , but that doesn't work.
I also created a table with <tbody> around each <tr>. But that doesn't work 
either.

I am wondering if there is a way to get this result? What is the correct way to 
do this?
Please have a look at my attempts: http://www.glassbox.nl/test/table.html.

CSS
table#one {width: 600px; margin: 20px auto;}
table#one th {text-align: left;}
table#one td {width: 33%;  background: pink;}
table#one tr.details td {background: aqua;  width: 50%;}

table#two {width: 600px; margin: 20px auto;}
table#two th {text-align: left;}
table#two td {width: 33%;  background: goldenrod;}
table#two tr.details td {background: lightblue; width: 50%;}
th {background: yellow;}

XHTML
 <table id="one">
  <thead>
   <tr><th>Een</th><th>Twee</th><th>Drie</th></tr>
  </thead>
  <tbody>
   <tr><td>een</td><td>twee</td><td>drie</td></tr>
   <tr class="details"><td>details</td><td>details</td></tr>
   <tr><td>een</td><td>twee</td><td>drie</td></tr>
   <tr><td>een</td><td>twee</td><td>drie</td></tr>
  </tbody>
 </table>

 <table id="two">
  <thead>
   <tr><th>Een</th><th>Twee</th><th>Drie</th></tr>
  </thead>
  <tbody>
   <tr><td>een</td><td>twee</td><td>drie</td></tr>
  </tbody>
  <tbody>
   <tr class="details"><td>details</td><td>details</td></tr>
  </tbody>
  <tbody>
   <tr><td>een</td><td>twee</td><td>drie</td></tr>
  </tbody>
  <tbody>
   <tr><td>een</td><td>twee</td><td>drie</td></tr>
  </tbody>
 </table>

Thanks in advance.
Dimitri
. 

______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/