Colspan 和 rowspan 在某些地方工作而不是在所有地方

Question

我有以下 html 代码：

<!doctype html>
<html>
<body>
<table border=1>
<tr>
<th> a block</th>
<th>b block</th>
<th> c block</th>
<td colspan=2>d block</td>
</tr>
<tr>
<td>e block</td>
<td>f block</td>
<td rowspan=2>g block</td>
<td rowspan=2>h block</td>
<td rowspan=2>i block</td>
<td colspan=2>j block</td>
</tr>
<tr><td> s block</td>
<th> welcome</th>
<td colspan=2>k block</td>
<td rowspan=2>l block</td>
<td colspan=2>m block</td>
</tr>
</table>
</body>
</html>

我知道这段代码很疯狂。但这在我的考试中被要求写出它的输出。在 CSS 中有 colspan 和 rowspan 的替代方案，但我该怎么办，这是我的考试。当我在 Edge 中运行这段代码时，我得到了输出我在使用 chrome 时也得到了相同的输出。

我怀疑 colspan 属性在 d block 中应用，但在 j block、k block 和 m block 中没有应用。为什么会这样？为什么 colspan 属性应用于某个单元格而不是全部？ rowspan 也有类似的问题。行跨度未应用于 l block?

提前致谢:)

Answer 1

j block 和 k block 都是 2 列宽，但是右边的列是 0px 宽。 l block 相同：下一行的高度为 0px。

在第一行再添加 3 个包含内容的单元格，您会看到 j/k 块横跨 2 列。

此外，Edge 和 Chrome 使用相同的渲染引擎，因此无论是对还是错，它们的输出看起来都是一样的。如果您想查看不同引擎的输出，请使用 Firefox 或 Safari。

Colspan 和 rowspan 在某些地方工作而不是在所有地方

Colspan and rowspan working in some places not in all places

html

html-table