4

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

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

4

2 回答 2

5

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

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

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

于 2013-08-22T14:51:02.880 回答
0

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

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

http://jsfiddle.net/3KJdX/

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

于 2013-08-23T12:09:19.510 回答