表格的 rowspan 和 colspan

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>

但是我从上面的代码中得到了这样的结果：需要删除高亮部分。 但是在尝试从第二个<tr></tr>中删除附加的<td></td>时，我得到了完全不同于预期结果的东西。

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

- Anish Krishnan

---

只是一个想法，但是尝试在你的CSS中为TH添加一个固定高度。如果没有明确设置，表格有吸收任何未使用空间并扩展列和行的习惯。 - Dean O'Brien

就我所知，我已经检查了您的colspan和rowspan，它们在我的看来设置正确。 - Dean O'Brien

你好，我不知道为什么你要在其他的值为1时放置<th rowspan="2">MM</th>。 - AdityaDees

Answer 1

“完全不同”？在功能上，该表格是相同的；唯一可辨认（并且几乎可以忽略不计）的区别是“总计”和其他标题之间高度的变化。 无论如何，通过向“科目代码和科目名称”标题添加垂直填充，我能够使其看起来非常相似。您还可以将其添加到“备注”标题中。 实际上，任何跨越两行的元素都可以添加。

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

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

---

另外，我敢打赌，如果使用现代CSS网格而不是表格，您会更容易地实现类似的效果。总的来说，表格都有点难以处理，这一点即使在这个解决方案中也显而易见。

- TARN4T1ON

---

谢谢。为这些单元格添加垂直填充有所帮助。 - Anish Krishnan

Answer 2

也许我来晚了，但是我有一个技巧可以实现相同的效果，只需将不需要的单元格边框设置为透明，并将单元格宽度设置为0即可。

以下是我的做法：

    <table border="1" style="border-collapse:collapse; border:none; border-color:black" width="100%" height="30%" cellpadding="8px" align="center">
        <tr height="50px">
            <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>
<!--cover up the unwanted cell-->
            <td style="padding: 0;padding-top: 18px;border: none;width: 0;"></td>

        </tr>
        <tr>
            <th>MM</th>
            <th>MO</th>
            <th>MM</th>
            <th>MO</th>
        </tr>
        <tr>
            <td>Economics Theory</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>43</td>
            <td>100</td>
            <td>75</td>
            <td>P</td>
        </tr>
        <tr>
            <td>Elements 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>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>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>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>

- U20

Answer 3

我认为这样会更好

<table border="1" cellpadding="8" cellspacing="0">
    <tbody>
        <tr>
            <td rowspan="2">Subject code and Subject Name</td>
            <td colspan="2">Internal Assessment</td>
            <td colspan="2">External Assessment</td>
            <td colspan="2">Grand Total</td>
            <td rowspan="2">Remarks</td>
        </tr>
        <tr>
            <td>MM</td>
            <td>MO</td>
            <td>MM</td>
            <td>MO</td>
            <td>MM</td>
            <td>MO</td>
        </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>
    </tbody>
</table>

- AdityaDees