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/

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

缩进表的每隔一行而不影响第一行。 HTML / CSS / JS / jQuery的

2 个答案: