在不影响第一行的情况下每隔一行缩进一个表。 html/css/js/jQuery答案

【问题标题】：Indenting every second row of a table without affecting the first rows. html/css/js/jQuery在不影响第一行的情况下每隔一行缩进一个表。 html/css/js/jQuery
【发布时间】：2013-08-22 14:37:11
【问题描述】：

我有一个充满数据的表格。每第二行是每个第一行的子行。因此，在我单击父行之前，每个子行都被隐藏。然后使用 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");
  });

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

【问题讨论】：

你能做个小提琴吗
请发布您的代码。
你能创建一个jsfiddle example吗？
你怎么知道这些行之间有关系？
这确实很重要。如果行之间存在关系，则需要在标记中表达，而不仅仅是视觉外观。如果您需要真正的帮助，也许您应该发布实际上代表您正在做的事情的数据。就目前而言，表格看起来像是错误的标记，因为您正在寻找表达父/子关系（哪些表格并不是真正适合的）。

标签： javascript jquery html css

【解决方案1】：

实际上你不能完全用表格做到这一点，但你可以试试这个：

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

但是如果你没有那么多列，你可以简单地使用 ul 而不是 table 来进行这种用法。看看http://cssdeck.com/labs/pure-css-tree-menu-framework

【讨论】：

我担心有人会这么说。看起来这可能是一个常见问题，缩进子行应该很常见，不是吗？
为什么会很普遍？
在父级下面缩进子行是有意义的。并非在所有情况下，但在某些情况下。
这并不常见，因为这样的结构是一棵树而不是一个普通的表。看看我的答案中的链接。

【解决方案2】：

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

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

http://jsfiddle.net/3KJdX/

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

【讨论】：