Indenting every second row of a table without affecting the first rows. html/css/js/jQuery

Question

I have a table full of data. Every second row is a child row of every first row. So each child row is hidden until I click the parent row. The child rows then fadeIn below the parents with jQuery.

How would I indent the child rows beneath the parent rows so they are clearly child nodes to the parents?

Ive tried adding small elements to the child rows but that just doesnt look right. It ends up crushing the first rows when I expand out the second rows.

I hope this doesnt sound like jibberish...

//HTML & CSS
<table>
    <tr>
        <th id="clickDiv3"></th>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
       <th></th>
       <td class="showThird">Peter</td>
       <td class="showThird">Griffin</td>
    </tr>
    <tr>
       <th></th>
       <td class="showThird">Lois</td>
       <td class="showThird">Griffin</td>
    </tr>
</table>


  //JS
  $("#clickDiv3").click(function(){
      $(".showThird").slideDown(".500").fadeIn(".200");
  });

Any help or advice would be very appreciated!

Answer 1

Actually you can't exactly do that with tables but you can try this:

table tr:nth(3) td {
    padding-left : 10px;
}

But if you don't have so many columns, you can simply use ul instead of table for such usage. Take a look at http://cssdeck.com/labs/pure-css-tree-menu-framework

Answer 2

Not sure if this works cross-browser (only tested in Chrome). All cells on even rows will be indented (and overflow the table width):

tr:nth-child(2n) td {
    position: relative;
    left: 20px;
}

http://jsfiddle.net/3KJdX/

But you should listen to the advice the other users are giving you: maybe a table is not the right structure for your data.