html - 表行跨度和列跨度

Question

我需要这样一张表:

执行以下操作: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 rowspan="2">MM</th>
        <th rowspan="2">MO</th>
        <td></td>
    </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>

但是我从上面的代码中得到了这样的结果:需要删除突出显示的部分。

但是当试图删除额外的时<td></td> 从第二个开始 <tr></tr> 我得到了这样的结果，与预期的结果完全不同。

CSS 文件

table {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.subject {
    text-align: left;
    padding-left: 10px;
    padding-right: 95px;
}

.second {
    width: 20%;
}

.total {
    padding-left: 30px;
    padding-right: 30px;
}

.obtained {
    padding-left: 50px;
    padding-right: 50px;
}

Answer 1

“完全不同”？该表在功能上是相同的；唯一可辨别的(几乎看不到)区别是“总计”和其他标题之间的高度变化。

无论如何，通过向“主题代码和主题名称”标题添加垂直填充，我能够使它看起来非常相似。您也可以将其添加到“备注”标题中。真正跨越两行的任何元素。

padding-top: 35px;
padding-bottom: 35px;

看起来与您想要的外观几乎相同。

---

顺便说一句，我敢打赌，通过使用现代 CSS 网格而不是表格，您会更轻松地完成类似的工作。一般来说，使用表格有点令人讨厌，甚至这个解决方案也应该证明这一点。