HTML 拆分/合并单元格问题

Question

我尝试将我的输出显示为表格格式，这就是我希望表格的样子:

现在我可以像下面这样:

<tr>
    <td class="tbHead">Document No.</td>
    <td class="tbContent"><p id="documentId">${approva.documentId}</p></td>
    <td class="tbHead" rowspan="2">Approval</td>

    <td class="tbContent"><p id="docApp0">${approva.docApp0}</p></td>
    <td class="tbContent"><p id="docApp1">${approva.docApp1}</p></td>
    <td class="tbContent"><p id="docApp2">${approva.docApp2}</p></td>
    <td class="tbContent"><p id="docApp3">${approva.docApp3}</p></td>
    <td class="tbContent"><p id="docApp4">${approva.docApp4}</p></td>
</tr>
<tr>
    <td class="tbHead">Department</td>
    <td class="tbContent"><p id="docDepartment">${approva.docDepartment}</p></td>

    <td class="tbContent"><p id="docApp0">${approva.docApp0}</p></td>
    <td class="tbContent"><p id="docApp1">${approva.docApp1}</p></td>
    <td class="tbContent"><p id="docApp2">${approva.docApp2}</p></td>
    <td class="tbContent"><p id="docApp3">${approva.docApp3}</p></td>
    <td class="tbContent"><p id="docApp4">${approva.docApp4}</p></td>
</tr>

但是，当我像下面这样更改我的代码以使其看起来像第一张图片时，它看起来如下:

<tr>
    <td class="tbHead" rowspan="2">Document No.</td>
    <td class="tbContent" rowspan="2"><p id="documentId">${approva.documentId}</p></td>
    <td class="tbHead" rowspan="4">Approval</td>

    <td class="tbContent"><p id="docApp0">${approva.docApp0}</p></td>
    <td class="tbContent"><p id="docApp1">${approva.docApp1}</p></td>
    <td class="tbContent"><p id="docApp2">${approva.docApp2}</p></td>
    <td class="tbContent"><p id="docApp3">${approva.docApp3}</p></td>
    <td class="tbContent"><p id="docApp4">${approva.docApp4}</p></td>
</tr>
<tr>
    <td class="tbHead" rowspan="2">Department</td>
    <td class="tbContent" rowspan="2"><p id="docDepartment">${approva.docDepartment}</p></td>

    <td class="tbContent" rowspan="3"><p id="docApp0">${approva.docApp0}</p></td>
    <td class="tbContent" rowspan="3"><p id="docApp1">${approva.docApp1}</p></td>
    <td class="tbContent" rowspan="3"><p id="docApp2">${approva.docApp2}</p></td>
    <td class="tbContent" rowspan="3"><p id="docApp3">${approva.docApp3}</p></td>
    <td class="tbContent" rowspan="3"><p id="docApp4">${approva.docApp4}</p></td>
</tr>

我的输出与我预期的不一样，这是什么问题？

仅供引用，tbHead 和 tbContent 的值与其高度相同。

我试图为具有不同高度值的单元格赋予不同的类，但它总是遵循具有更大高度值的其他单元格的高度。

谢谢。

编辑:

<tr>
    <td class="tbHead" rowspan="2">Document No.</td>
    <td class="tbContent" rowspan="2"><p id="documentId">${approva.documentId}</p></td>
    <td class="tbHead" rowspan="4">Approval</td>

    <td class="tbContent"><p id="docApp0">${approva.docApp0}</p></td>
    <td class="tbContent"><p id="docApp1">${approva.docApp1}</p></td>
    <td class="tbContent"><p id="docApp2">${approva.docApp2}</p></td>
    <td class="tbContent"><p id="docApp3">${approva.docApp3}</p></td>
    <td class="tbContent"><p id="docApp4">${approva.docApp4}</p></td>
</tr>
<tr>
    <td class="tbContent" rowspan="3"><p id="docApp0">${approva.docApp0}</p></td>
    <td class="tbContent" rowspan="3"><p id="docApp1">${approva.docApp1}</p></td>
    <td class="tbContent" rowspan="3"><p id="docApp2">${approva.docApp2}</p></td>
    <td class="tbContent" rowspan="3"><p id="docApp3">${approva.docApp3}</p></td>
    <td class="tbContent" rowspan="3"><p id="docApp4">${approva.docApp4}</p></td>
</tr>
<tr>
    <td class="tbHead" rowspan="2">Department</td>
    <td class="tbContent" rowspan="2"><p id="docDepartment">${approva.docDepartment}</p></td>               
</tr>

Answer 1

这是一个方法。

请注意，空的 td 必须在那里，否则它会像您已有的那样折叠起来。

table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 30px;
	height: 25px;
}
td:last-child {
	border-right: 1px solid transparent;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	padding: 0;
	width: 0;
	height: 25px;
}

<table>
	<tbody>
		<tr>
			<td rowspan="3">1</td>
			<td rowspan="3">2</td>
			<td rowspan="6">3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td></td>
		</tr>
		<tr>
			<td rowspan="5">4</td>
			<td rowspan="5">5</td>
			<td rowspan="5">6</td>
			<td rowspan="5">7</td>
			<td rowspan="5">8</td>
			<td></td>
		</tr>
		<tr><td></td></tr>
		<tr>
			<td rowspan="3">1</td>
			<td rowspan="3">2</td>
			<td></td>
		</tr>
		<tr><td></td></tr>
		<tr><td></td></tr>
	</tbody>
</table>

旁注:

像这样制作表格可能很棘手，所以这个小小的在线创作者做得非常好:

• https://tabletag.net/