HTML拆分/合并单元格问题

Question

我尝试以表格格式显示输出，这就是我想要的表格：

现在我可以这样做：

<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>

然而，当我更改我的代码时，如下所示，使其看起来像第一张图片，它看起来如下：

<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>

我的输出看起来不像我的预期会出现什么问题？

仅供参考，tbHead和tbContent的高度值相同。

我尝试为不同高度值的细胞提供不同的类，但它总是遵循其他细胞高度更高的细胞。

谢谢。

编辑：

<?php star_rating(print $row['Rating']); ?>

Answer 1

这是一种方式。

请注意，空的td需要在那里，否则它会像你已经崩溃一样崩溃。

＆＃13;

＆＃13;

{{ appointment.teachers|join:", " }}
{{ appointment.subjects|join:", " }}

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

旁注：

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

• https://tabletag.net/

Answer 2

您可以在它们开始的表格行中定义TD元素。所以那里有1,2和3的单元格将从第二行开始。部门和ahhhhhh ..将从第3行开始。