縮進表的每隔一行而不影響第一行。 HTML / CSS / JS / jQuery的

Question

我有一個充滿數據的表。 每隔一行是第一行的子行。 因此，在單擊父行之前，每個子行都是隱藏的。 然后使用jQuery將子行淡入父母的下方。

我如何縮進父行下面的子行，以便它們顯然是父節點的子節點？

我曾嘗試在子行中添加小元素，但這看起來並不合適。 當我展開第二行時，它最終會壓碎第一行。

我希望這聽起來不像是胡言亂語......

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

任何幫助或建議將非常感謝！

Answer 1

實際上你不能用表完全做到這一點，但你可以試試這個：

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

但是如果你沒有這么多列，你可以簡單地使用ul而不是table來實現這種用法。 請查看http://cssdeck.com/labs/pure-css-tree-menu-framework

Answer 2

不確定這是否適用於跨瀏覽器（僅在Chrome中測試過）。 偶數行上的所有單元格都將縮進（並溢出表格寬度）：

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

http://jsfiddle.net/3KJdX/

但您應該聽取其他用戶給您的建議：表格可能不是您數據的正確結構。