HTML表格使用rowspan和colspan制作成绩表时显示异常如何解决

核心问题 #

你的原有HTML表格的表头行列合并逻辑存在错误：第二行多了无意义的空<td>标签，同时总计列的子表头错误添加了rowspan="2"属性，导致表格渲染时出现多余单元格、表头层级错位的问题。

修正后HTML代码 #

<table border="1" cellpadding="8" cellspacing="0">
    <tr>
        <th rowspan="3">Subject code and Subject Name</th>
        <th colspan="2" rowspan="2">Internal Assessment</th>
        <th colspan="2" rowspan="2">External Assessment</th>
        <th colspan="2">Grand Total</th>
        <th rowspan="3">Remarks</th>
    </tr>
    <tr>
        <th>MM</th>
        <th>MO</th>
    </tr>
    <tr>
        <th>MM</th>
        <th>MO</th>
        <th>MM</th>
        <th>MO</th>
    </tr>      
    <tr>
        <td class="subject">Economics Theory</td>
        <td class="total">40</td>
        <td class="obtained">32</td>
        <td class="total">60</td>
        <td class="obtained">43</td>
        <td class="total">100</td>
        <td class="obtained">75</td>
        <td>P</td>
    </tr>
    <tr>
        <td class="subject">Elemetns of Statistics</td>
        <td>40</td>
        <td>31</td>
        <td>60</td>
        <td>38</td>
        <td>100</td>
        <td>69</td>
        <td>P</td>
    </tr>
    <tr>
        <td class="subject">Company Law</td>
        <td>40</td>
        <td>32</td>
        <td>60</td>
        <td>47</td>
        <td>100</td>
        <td>79</td>
        <td>P</td>
    </tr>
    <tr>
        <td class="subject">Money, Banking, Financial Management</td>
        <td>40</td>
        <td>31</td>
        <td>60</td>
        <td>36</td>
        <td>100</td>
        <td>67</td>
        <td>P</td>
    </tr>
    <tr>
        <td class="subject">Elements of Coding</td>
        <td>40</td>
        <td>32</td>
        <td>60</td>
        <td>47</td>
        <td>100</td>
        <td>79</td>
        <td>P</td>
    </tr>
</table>

调整说明 #

• 第二行仅保留「总计」对应的两个子表头MM、MO，删掉了多余的空<td>标签，同时移除了错误添加的rowspan="2"属性
• 第三行仅保留内部评估、外部评估对应的两组MM、MO子表头，其余位置由上层单元格的rowspan属性自动填充
• 你提供的CSS代码无需修改，直接搭配上述HTML代码即可实现预期的表格效果

内容的提问来源于stack exchange，提问作者Anish Krishnan