HTML / CSS - 创建论坛 - 动态缩进 tr 的任何方式？答案

【问题标题】：HTML / CSS - Creating forum - Any way of dynamically indenting tr's?HTML / CSS - 创建论坛 - 动态缩进 tr 的任何方式？
【发布时间】：2014-08-28 13:22:25
【问题描述】：

我正在尝试创建一个论坛（不会显示 PHP）。每个帖子/回复由两个 td 表示（第一个 td 有图像 - 用户个人资料图片 -，第二个 td 有文本 - 用户写的内容 - 宽度为 100%）。第一篇文章没有缩进。帖子可以收到任意数量的回复。每个回复都可以收到任意数量的回复。我想不出一种动态缩进回复的方法。基本上，我需要一种方法来让帖子回复有一个“缩进”，对回复的回复应该有两个“缩进”，对回复的回复应该有三个“缩进”等等。

这是我尝试过的。 CSS：

tr {
    border-left: 20px solid transparent; /* this would be the indent which each reply will receive */

HTML：

<table>
    <tr> <!-- this is the first reply to a post, so it should receive one indent -->
        <td class='first'><img src='proileImage.png' width='30px' /></td>
        <td class='second'>first reply</td>
    </tr>

    <tr> <!-- this is another reply to the post, so this should also get one indent -->
        <td class='first'><img src='proileImage.png' width='30px' /></td>
        <td class='second'>Second reply</td>

        <tr> <!--this is a reply to the second reply, so it should have two indents-->
            <td class='first'><img src='proileImage.png' width='30px' /></td>
            <td class='second'>Reply to second reply</td>
        </tr>

    </tr>
</table>

如您所见，我希望由于对第二个回复的回复是 tr 内的 tr，它会收到两个 20px 的左边框（两个缩进），但它只缩进一次 20px。我还意识到将 tr's 放在 tr's 内是无效的。

我想到的另一个解决方案（但不是正确的解决方案）是将每个回复放在一个 li 内（因为 li 收到一个左边距，并且 li 里面的 li 也会缩进）但后来我发现放置 td并且 tr 在 ul's 和 li's 里面是无效的。

我想不出一种方法来动态地使每个帖子/回复有一个缩进，并且对回复的每个回复都有两个缩进等等。我无法更改每个帖子/回复的内容（必须由两个 td 组成）但我可以更改任何其他内容（CSS 和帖子/回复周围的 html）。谁能想到我可以动态缩进每个帖子/回复的方法，具体取决于它是回复，回复回复等？

这属于 codegolf (https://codegolf.stackexchange.com/) 吗？

【问题讨论】：

在<tr> 中嵌套<tr> 不是有效的HTML。 <tr> 的唯一有效直系后代是 <td> 或 <th>。

标签： html css dynamic html-table margin

【解决方案1】：

您可能不得不在 div 中使用 div 而不是表格行和数据。 TR 在定位方面很难格式化。除非您想成为老派并在表中的表中放置表？ Divs 会更繁琐，但你会得到你想要的结果。一种解决方案可能会使用 jQuery，例如：

$(".replyDiv").foreach(function(){
    // change css to margin-left:20px
});

编辑：

检查此http://jsfiddle.net/E2nfS/2/ 注意每个回复的 Css 是如何只有 margin-left:20px; 您可以让 jquery 将其应用于您在回复中的每个后续 div。希望它可以帮助您直观地了解该做什么。

【讨论】：

【解决方案2】：

你不能在 td first off 里面再放一行。使用萤火虫或其他东西来查看它是否与前两个一起制作了另一行。 Youll 需要另一个 td，然后又需要一个完整的表。不过，这对您来说将是一件令人头疼的事情，因为表格单元格会排成一行。也许它只是我，但我会建议使用另一种节点类型，如 div 或 span 或其他东西（甚至可能是一个列表），然后为 css 编写一个循环，或者作为具有回复计数循环的子元素或单个元素上的内联 css。

【讨论】：