添加更多标题后表格溢出

Question

我遇到了一个表格在添加一些标题后溢出的问题。 由于某种原因，在我添加多个标题后，我的表格向右移动。

原始表格如下所示： 你可以看到一切都合适。但是，在再添加三个表头后，表格发生了变化。

<table class="table table-bordered" style="font-weight: bolder;color: black;width:100%;">

<thead>
<tr style="border: 1px solid black;">
<th style="border: 1px solid black; font-size:11px;width:20px;text-align:center;font-weight: bolder;color: black;vertical-align: bottom;">SUBJECTS</th>
 <th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">CA1 10%</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">CA2 10%</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">CA3 10%</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">CA4 10%</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">CA5 10%</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">CA6 10%</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">EXAM 40%</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">TOTAL 100%</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">GRADE</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">HIGHEST IN CLASS</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">LOWEST IN CLASS</th>
<th style="border: 1px solid black; font-size:11px;width:5px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">POSITION</th>
<th style="border: 1px solid black; font-size:11px;width:2px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">REMARK</th>
</tr>
</thead>
<tbody style="white-space: nowrap;">
                                    
<tr style="border: 1px solid black;height:30px;">
<td style="border: 1px solid black;font-size:11px;">MATHEMATICS</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">9</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">6</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">5</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">8</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">2</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">7</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">6</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">43</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">C+</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">7</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">6</td>
<td style="border: 1px solid black;font-size:11px;text-align:center;">14TH</td>
<td style="border: 1px solid black;font-size:11px;text-align:left;">VERY GOOD</td>
</tr>
 <tr>
<td colspan="3" style="border: 1px solid black;"></td>
 <td colspan="3" style="border: 1px solid black; text-align:justify;"><b>C.A KEYS</b></td>
<td colspan="5" style="border: 1px solid black; text-align:justify;"><b>GRADE KEY</b></td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black; text-align:center;"></td>
<td colspan="3" style="border: 1px solid black;text-align:justify;">CA1 - 1ST TEST </td>
<td colspan="5" style="border: 1px solid black;text-align:justify;">FL GRADE - FINAL LETTER GRADE</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black;"></td>
<td colspan="3" style="border: 1px solid black;text-align:justify;">CA2 - 2ND TEST</td>
<td colspan="5" style="border: 1px solid black;text-align:justify;">80 AND ABOVE= A - EXCELLENT</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black; text-align:center;"></td>
<td colspan="3" style="border: 1px solid black;text-align:justify;">CA3 - ASSIGNMENT</td>
<td colspan="5" style="border: 1px solid black;text-align:justify;">70 - 79 = B -VERY GOOD</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black;"></td>
<td colspan="3" style="border: 1px solid black;text-align:justify;">CA4 - CLASS EXERCISE</td>
<td colspan="5" style="border: 1px solid black;text-align:justify;">60 - 69 = C - GOOD</td>
</tr>
 <tr>
<td colspan="3" style="border: 1px solid black;"></td>
<td colspan="3" style="border: 1px solid black;text-align:justify;">CA5 - AFFECTIVE</td>
<td colspan="5" style="border: 1px solid black;text-align:justify;">50 - 59 = D - PASS</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black;"></td>
<td colspan="3" style="border: 1px solid black;text-align:justify;">CA6 - PSYCHOMOTOR</td>
<td colspan="5" style="border: 1px solid black;text-align:justify;">00 - 49 = E - FAIR</td>
</tr>
<tr>
<td colspan="9" style="border: 1px solid black;"><color style="color:blue;"> TEACHER'S REMARKS:</color><b style="text-transform: uppercase;"></b></td>
<td colspan="2" style="border: 1px solid black;">RESULT:</td>
</tr>
<tr>
<td colspan="9" style="border: 1px solid black;"><color style="color:blue;"> PRINCIPAL'S REMARKS:</color> <b style="text-transform: uppercase;"></b></td>
<td colspan="2" style="border: 1px solid black;">SIGN: </td>
</tr>
</tbody>
</table>

https://jsfiddle.net/missjargo/3p5ku1zh/41/

如何强制下面的表头和表格单元格作为一个表格？

Answer 1

colspan 的总和不等于标题单元格的数量。例如，您可以将td colspan="5" 替换为td colspan="8" 并将td colspan="2" 替换为td colspan="5"。