属性 rowspan 导致后面的 <tr> 元素显示在浏览器的上一行中答案

【问题标题】：The attribute rowspan causes the succeeding <tr> element to be displayed in the previous row in browser属性 rowspan 导致后面的 <tr> 元素显示在浏览器的上一行中
【发布时间】：2020-10-28 21:18:53
【问题描述】：

我试图让单行跨越 9 行，但由于某种原因，应该显示在跨越行下方的行出现在跨越行中，而不是在其下方。任何帮助是极大的赞赏！代码如下：

<table>
                <thead>
                <tr> 
                    <th scope="col"> GDP index </th> 
                    <th scope="col"> Vegas track </th>
                    <th scope="col"> Boston track </th> 
                </tr>
                </thead>

                <tbody>
                <tr> 
                    <th scope="row"> Number one </th> 
                    <td> 1:32:33 </td>
                    <td> 2:32:69 </td>
                    
                </tr>

                <tr>
                    <th rowspan="9" scope="row"> Number two - ten </th>
                    <td rowspan="9" colspan="2"> Did not compete </th>
                </tr>


                <tr>
                    <th scope="row"> Number eleven </th>
                    <td> 45:12:02 </td>
                    <td> 3:04:05 </td>
                </tr>
                </tbody>

                <tfoot>
                <tr>
                    <th> Total time </th>
                    <td> 10:48:22 </td>
                    <td> 11:43:44 </td>
                </tr>
                </tfoot>
    </table>

标题为“第 11 号”的行应该出现在上一行的下方，但却出现在上一行。

【问题讨论】：

标签： html

【解决方案1】：

取出rowspan="9"。一旦我这样做了，然后将第 11 行放在第 2-10 行下方。

这是查看此示例以查看行为的另一种方式：

<table border="1">
                <thead>
                <tr> 
                    <th scope="col"> GDP index </th> 
                    <th scope="col"> Vegas track </th>
                    <th scope="col"> Boston track </th> 
                </tr>
                </thead>

                <tbody>
                <tr> 
                    <th scope="row"> Number one </th> 
                    <td> 1:32:33 </td>
                    <td> 2:32:69 </td>
                    
                </tr>

                <tr style="background-color: yellow;">
                    <th rowspan="9" scope="row"> Number two - ten </th>
                    <td rowspan="9" colspan="2"> Did not compete </th>
                </tr>

                <tr><td></td></d></tr>
                <tr><td></td></d></tr>
                <tr><td></td></d></tr>
                <tr><td></td></d></tr>
                <tr><td></td></d></tr>
                <tr><td></td></d></tr>
                <tr><td></td></d></tr>
                <tr><td></td></d></tr>

                <tr style="background-color: orange;">
                    <th scope="row"> Number eleven </th>
                    <td> 45:12:02 </td>
                    <td> 3:04:05 </td>
                </tr>
                </tbody>

                <tfoot>
                <tr>
                    <th> Total time </th>
                    <td> 10:48:22 </td>
                    <td> 11:43:44 </td>
                </tr>
                </tfoot>
    </table>

【讨论】：

我希望它与 rowspan 属性一起使用。这对我来说是一个 HTML 练习，我不关心功能。如果元素表示新行的开始，那么为什么我的“第 11 号”标题显示为上一行的第 4 列？
如果你想让它跨越 9 行，你需要有 9 个现有的行才能跨越。在您的原始代码中，您没有。

【解决方案2】：

这是预期的行为。

rowspan=9 表示“此单元格应出现在这一行和接下来的 8 行中”

由于“11 号”在下一行，它成为该行中的第 4 个单元格，因为前一行的单元格用完下一行的前三个位置。 p>

这是一个更简单的例子：

table,
td,
th {
  border-collapse: collapse;
  border: solid black 1px;
}

<table>
  <tr>
    <th scope=col>Column 1</th>
    <th scope=col>Column 2</th>
  </tr>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
  </tr>
  <tr>
    <td rowspan=3>Row 2-4, Col 1</td>
    <td>Row 2, Col 2</td>
  </tr>
  <tr>
    <td>Row 3, Col 2</td>
  </tr>
  <tr>
    <td>Row 4, Col 2</td>
  </tr>
  <tr>
    <td>Row 5, Col 1</td>
    <td>Row 5, Col 2</td>
  </tr>

span 表示它跨越行，而不是它只是具有多行的高度。

如果您不想要这种行为，请不要使用rowspan 引起它。

如果您的目标是创建一个具有九行高度的行，但实际上其中没有跨越九行的单元格：请使用 CSS height 属性。

【讨论】：

我的目标是在跨越 9 行的行之后立即开始新行。我不希望下一行成为第 4 个单元格。是的，我知道 height 属性，我想知道是否可以在没有该属性的情况下完成
元素应该表示新行的开始。为什么不在这里做呢？我是否误解了元素的用途？
@MatthewS。 - 我已经在答案中解释了这一点。 <tr> 确实开始了一个新行。跨越多行的单元格在这两行中。这就是跨度的意思。你误会了rowspan，而不是<tr>。