表行跨度和列跨度答案

【问题标题】：Table rowspan and colspan表行跨度和列跨度
【发布时间】：2021-10-25 18:35:59
【问题描述】：

我需要这样的表：

执行了以下操作：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;
}

【问题讨论】：

只是一个想法，但请尝试在 CSS 中为 TH 添加一个固定高度。如果没有明确设置，表格会吸收任何未使用的空间并分散列和行。
对于我的价值，我已经通过了你的 colspans 和 rowspans，它们似乎对我来说设置正确
你好我不知道为什么你把<th rowspan="2">MM</th>当别人是1

标签： html css html-table

【解决方案1】：

“完全不同”？该表在功能上是相同的；唯一可辨别（而且几乎没有）的区别是“总计”和其他标题之间的高度变化。

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

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

似乎与您想要的外观几乎相同。

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

【讨论】：

谢谢。向这些单元格添加垂直填充有帮助。

【解决方案2】：

我觉得这样应该更好

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

【讨论】：