Indent each second row of the 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. Therefore, each child row is hidden until I click on the parent row. After that, the child lines then disappear below the parents using jQuery.

How would I postpone child lines under parent lines so that they are explicitly child nodes for parents?

Ive tried adding small elements to the child strings, but that just doesn't look right. He finishes crushing the first lines as I expand my ranks.

Hope this doesn't sound like nonsense ...

//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 greatly appreciated!

Answer 1

In fact, you cannot exactly do this using tables, but you can try the following:

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

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

Answer 2

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

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

http://jsfiddle.net/3KJdX/

But you should listen to the tips that other users give you: perhaps the table is not the right structure for your data.