在不影响第一行的情况下，为表格中的每个第二行进行缩进。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");
  });

任何帮助和建议都将不胜感激！

- Daft

---

请发布你的代码。 - j08691

你能创建一个jsfiddle示例吗？ - Dom

如何知道这些行之间存在关系？ - cimmanon

“它确实很重要。如果行之间存在关系，这些关系需要在标记中表示出来，而不仅仅是通过视觉表现。如果您想得到真正的帮助，也许应该发布实际代表您正在做的数据。目前看来，表格似乎是错误的标记，因为您想表达父子关系（而表格并不是用于此目的的）。 ” - cimmanon

你能否在HTML中添加注释，明确显示哪些行/单元格应该“缩进”？顺便提一下，从我们在HTML中看到的少量信息来看，dl可能是更合适的标记。 - David Thomas

Answer 1

实际上，你不能完全用表格来实现这个功能，但是可以尝试以下方法:

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

但如果你没有那么多列，你可以直接使用

而不是来进行类似的用途。看一下这个http://cssdeck.com/labs/pure-css-tree-menu-framework
的例子。

- VahidNaderi

---

我担心有人会这么说。这似乎是一个普遍的问题，对于缩进子行应该很常见，不是吗？ - Daft

为什么这会很普遍？ - cimmanon

将子行缩进到父行下面是有意义的，虽然不是在所有情况下都是如此。 - Daft

这并不常见，因为这样的结构是一棵树而不是一个简单的表格。请查看我回答中的链接。 - VahidNaderi

Answer 2

不确定这是否适用于跨浏览器（仅在Chrome中进行了测试）。所有偶数行上的单元格都将缩进（并溢出表格宽度）：

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

http://jsfiddle.net/3KJdX/

但是你应该听取其他用户的建议：也许表格不是适合你的数据的正确结构。

- bfavaretto