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

Indenting every second row of a table without affecting the first rows. html/css/js/jQuery

本文关键字：一行 一个 html jQuery css js 缩进 影响 情况下      更新时间：2023-09-26

我有一个充满数据的表。第二行是第一行的子行。因此，在单击父行之前，每个子行都是隐藏的。然后使用jQuery将子行fadeIn隐藏在父行的下方。

如何将子行缩进到父行下面，以便它们清楚地成为父行的子节点？

我试着在子行中添加一些小元素，但看起来不太合适。当我展开第二排时，它最终会压垮第一排。

我希望这听起来不像是嘲讽。。。

//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");
  });

如有任何帮助或建议，我们将不胜感激！

实际上，你不能用表来做到这一点，但你可以尝试一下：

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

但若并没有这么多列，则可以简单地使用ul而不是table来实现这种用途。看看http://cssdeck.com/labs/pure-css-tree-menu-framework

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

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

http://jsfiddle.net/3KJdX/

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

相关文章：