缩进表的每隔一行而不影响第一行。 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/

但您应该听取其他用户给您的建议：表格可能不是您数据的正确结构。