执行以下操作: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;
}
最佳答案
“完全不同”?该表在功能上是相同的;唯一可辨别的(几乎看不到)区别是“总计”和其他标题之间的高度变化。
无论如何,通过向“主题代码和主题名称”标题添加垂直填充,我能够使它看起来非常相似。您也可以将其添加到“备注”标题中。真正跨越两行的任何元素。
padding-top: 35px;
padding-bottom: 35px;
看起来与您想要的外观几乎相同。
顺便说一句,我敢打赌,通过使用现代 CSS 网格而不是表格,您会更轻松地完成类似的工作。一般来说,使用表格有点令人讨厌,甚至这个解决方案也应该证明这一点。
关于html - 表行跨度和列跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69698474/