<table> "complete"行跨度后面的 HTML 单元格无法按预期工作

我正在尝试制作一个带有行跨度的相当简单的表，它按预期工作。但是，问题在于解决所有跨区单元格后出现的单元格;它们没有放置在我认为应该的位置。

这是我的代码：

<html>
<body>
<table width="100%" border="1">
<tr>
<td rowspan="7">
7 row
</td>
<td>
1 row
</td>
</tr>
<tr>
<td>
1 row
</td>
</tr>
<tr>
<td rowspan="5">
5 row
</td>
</tr>
<tr>
<td>
<i>This shouldn't be here, but below and aligned to the left side of the table</i>
</td>
<td>
<i>This shouldn't be here, but below and aligned at the right side of the table</i>
</td>
</tr>
</table>
</body>
</html>

以下是它在Chrome和Firefox中的渲染方式(我没有在Stack Overflow上发布内联图像的声誉(：

http://embernet.com/misc/rowspan.gif

这两个冗长的单元格确实应该放在已经建立的第 1 列和第 2 列中，而不是作为新的第 3 列和第 4 列。

问题似乎来自我跨越从未单独意识到的行。请记住，这是一个更大的动态生成的表的一部分，在某些情况下，该表将显示 7 行中的每一行。我知道不可避免地会有人问我为什么要这样做。

我在规格中没有看到任何表明我不能像这样行跨度的内容，所以我希望我只是错过了一些明显的东西。

JSFiddle在这里：https://jsfiddle.net/mLard575/

我不确定你在期待什么。根据我的理解，我给出了两种可能性。

根据您的要求选择

第一种方法：

table { 
border-collapse: collapse;
}
td {
padding: 20px; 
border: 1px solid black; 
text-align: center;
}

<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>        
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td rowspan="5"> 5 </td>   
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>

</tbody>
</table>

</body>

第二种方法：

table { 
border-collapse: collapse;
}
td {
padding: 20px; 
border: 1px solid black; 
text-align: center;
}

<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>        
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>   
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>

</tbody>
</table>

</body>

如果这两种方法不适合您。只需用图表示例解释更多内容即可更新代码。

相关内容

最新更新

热门标签：