Table 添加更多后溢出 headers
Table overflowing after adding more headers
我遇到了 table 的问题，它在添加一些 header 后溢出。
出于某种原因，在我添加多个 header 后，我的 table 向右移动。
原来的 table 是这样的：
你可以看到一切都合适。但是，再添加三个 header 后，table 发生了变化。
<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/
如何强制下面的 header 和 table 单元格合并为一个 table？
colspans 的总和不等于 header 单元格的数量。例如，您可以将 td colspan="5" 替换为 td colspan="8"，将 td colspan="2" 替换为 td colspan="5"。
我遇到了 table 的问题，它在添加一些 header 后溢出。 出于某种原因，在我添加多个 header 后，我的 table 向右移动。
原来的 table 是这样的：
<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/
如何强制下面的 header 和 table 单元格合并为一个 table？
colspans 的总和不等于 header 单元格的数量。例如，您可以将 td colspan="5" 替换为 td colspan="8"，将 td colspan="2" 替换为 td colspan="5"。