javascript - 最初の行に影響を与えることなく、テーブルの 2 行ごとにインデントします。html/css/js/jQuery

Question

データでいっぱいのテーブルがあります。すべての 2 行目は、すべての最初の行の子行です。したがって、親行をクリックするまで、各子行は非表示になります。子行は、jQuery を使用して親の下にフェードインします。

子行を親行の下にインデントして、親の子ノードであることを明確にするにはどうすればよいですか?

子行に小さな要素を追加しようとしましたが、正しく見えません。2行目を展開すると、最初の行が押しつぶされてしまいます。

これがぎこちなく聞こえないことを願っています...

//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");
  });

ヘルプやアドバイスをいただければ幸いです。