行跨度向上答案

【问题标题】：Rowspan upwards行跨度向上
【发布时间】：2021-02-17 10:12:39
【问题描述】：

我正在尝试编写一个 javascript 时间线，您可以在其中单击左列，显示右列中的某些内容。我想有更简单的方法可以做到这一点，但下面的 HTML 看起来真的很整洁。

因此，rowspan 的通常工作方式是您有一个 td，您希望向下扩展几行以完成表格。

<tr>
    <td>1942</td>
    <td rowspan=2>Something happened</td>
</tr>
<tr>
    <td>2017</td>
</tr>

但是，如果我想将行跨度向上，以便下面的时间线项填满两行，该怎么办？

<tr>
    <td>1942</td>
</tr>
<tr>
    <td>2017</td>
    <td rowspan=2>Something else happened</td>
</tr>

我知道我可以将它们全部移到第一行并从那里开始行跨度，但我真的很想拥有这种易于编辑的好格式，日期和行彼此相邻。

（我的一个想法是，如果您认为 rowspan 类似于 css 宽度和高度，则可能存在类似于 css left 和 top 的东西（例如“table-row”？）您可以设置，而不是实际移动td 到你想要的 tr。不过，我认为不存在。）

（另外，有人知道是否定义了负行跨度吗？）

【问题讨论】：

标签： html html-table

【解决方案1】：

不，rowspan 总是“向下”工作。 HTML 4 没有明确说明这一点，但肯定是暗示的，也没有办法改变它。 HTML5 将其明确化，在其无聊的细节中（但对实现者来说是必要的）Processing model 用于表格。

【讨论】：

【解决方案2】：

我知道这是一个老问题，但我自己正在寻找这个问题，这是谷歌上的第一个结果。经过一番调整，我设法找到了解决方案：

<table>
    <thead>
        <tr>
            <td>Column 1/<td>
            <td>Column 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan=2>A1</td>
            <!--This cell must be hidden; otherwise you will see a gap at the top of the second column between the header and body-->
            <td style=“padding:0px;” />
        </tr>
        <tr>
            <td rowspan=3>A</td>
        </tr>
        <tr>
            <td>A2</td>
        </tr>
        <tr>
            <td>A3</td>
        </tr>
    </tbody>
</table>

如果您想拥有比 2 列更深的层次结构，您可能需要进行一些试验，但我相信这是可能的。

【讨论】：