title: Table overflowing after adding more headers
body: <p>I am having issues with a table that is overflowing after adding a few headers.
  For some reason, after I add more than one header, my table shifts to the right.</p>
  <p>This is how the original table looks like:
  <a href="https://i.stack.imgur.com/xxn02.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xxn02.jpg" alt="table" /></a>
  You can see everything fits. However, after adding three more headers, the table shifted.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table table-bordered" style="font-weight: bolder;color: black;width:100%;"&gt;
  
  &lt;thead&gt;
  &lt;tr style="border: 1px solid black;"&gt;
  &lt;th style="border: 1px solid black; font-size:11px;width:20px;text-align:center;font-weight: bolder;color: black;vertical-align: bottom;"&gt;SUBJECTS&lt;/th&gt;
   &lt;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;"&gt;CA1 10%&lt;/th&gt;
  &lt;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;"&gt;CA2 10%&lt;/th&gt;
  &lt;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;"&gt;CA3 10%&lt;/th&gt;
  &lt;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;"&gt;CA4 10%&lt;/th&gt;
  &lt;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;"&gt;CA5 10%&lt;/th&gt;
  &lt;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;"&gt;CA6 10%&lt;/th&gt;
  &lt;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;"&gt;EXAM 40%&lt;/th&gt;
  &lt;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;"&gt;TOTAL 100%&lt;/th&gt;
  &lt;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;"&gt;GRADE&lt;/th&gt;
  &lt;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;"&gt;HIGHEST IN CLASS&lt;/th&gt;
  &lt;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;"&gt;LOWEST IN CLASS&lt;/th&gt;
  &lt;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;"&gt;POSITION&lt;/th&gt;
  &lt;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;"&gt;REMARK&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody style="white-space: nowrap;"&gt;
                                      
  &lt;tr style="border: 1px solid black;height:30px;"&gt;
  &lt;td style="border: 1px solid black;font-size:11px;"&gt;MATHEMATICS&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;9&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;6&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;5&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;8&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;2&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;7&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;6&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;43&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;C+&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;7&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;6&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:center;"&gt;14TH&lt;/td&gt;
  &lt;td style="border: 1px solid black;font-size:11px;text-align:left;"&gt;VERY GOOD&lt;/td&gt;
  &lt;/tr&gt;
   &lt;tr&gt;
  &lt;td colspan="3" style="border: 1px solid black;"&gt;&lt;/td&gt;
   &lt;td colspan="3" style="border: 1px solid black; text-align:justify;"&gt;&lt;b&gt;C.A KEYS&lt;/b&gt;&lt;/td&gt;
  &lt;td colspan="5" style="border: 1px solid black; text-align:justify;"&gt;&lt;b&gt;GRADE KEY&lt;/b&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="3" style="border: 1px solid black; text-align:center;"&gt;&lt;/td&gt;
  &lt;td colspan="3" style="border: 1px solid black;text-align:justify;"&gt;CA1 - 1ST TEST &lt;/td&gt;
  &lt;td colspan="5" style="border: 1px solid black;text-align:justify;"&gt;FL GRADE - FINAL LETTER GRADE&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="3" style="border: 1px solid black;"&gt;&lt;/td&gt;
  &lt;td colspan="3" style="border: 1px solid black;text-align:justify;"&gt;CA2 - 2ND TEST&lt;/td&gt;
  &lt;td colspan="5" style="border: 1px solid black;text-align:justify;"&gt;80 AND ABOVE= A - EXCELLENT&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="3" style="border: 1px solid black; text-align:center;"&gt;&lt;/td&gt;
  &lt;td colspan="3" style="border: 1px solid black;text-align:justify;"&gt;CA3 - ASSIGNMENT&lt;/td&gt;
  &lt;td colspan="5" style="border: 1px solid black;text-align:justify;"&gt;70 - 79 = B -VERY GOOD&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="3" style="border: 1px solid black;"&gt;&lt;/td&gt;
  &lt;td colspan="3" style="border: 1px solid black;text-align:justify;"&gt;CA4 - CLASS EXERCISE&lt;/td&gt;
  &lt;td colspan="5" style="border: 1px solid black;text-align:justify;"&gt;60 - 69 = C - GOOD&lt;/td&gt;
  &lt;/tr&gt;
   &lt;tr&gt;
  &lt;td colspan="3" style="border: 1px solid black;"&gt;&lt;/td&gt;
  &lt;td colspan="3" style="border: 1px solid black;text-align:justify;"&gt;CA5 - AFFECTIVE&lt;/td&gt;
  &lt;td colspan="5" style="border: 1px solid black;text-align:justify;"&gt;50 - 59 = D - PASS&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="3" style="border: 1px solid black;"&gt;&lt;/td&gt;
  &lt;td colspan="3" style="border: 1px solid black;text-align:justify;"&gt;CA6 - PSYCHOMOTOR&lt;/td&gt;
  &lt;td colspan="5" style="border: 1px solid black;text-align:justify;"&gt;00 - 49 = E - FAIR&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="9" style="border: 1px solid black;"&gt;&lt;color style="color:blue;"&gt; TEACHER'S REMARKS:&lt;/color&gt;&lt;b style="text-transform: uppercase;"&gt;&lt;/b&gt;&lt;/td&gt;
  &lt;td colspan="2" style="border: 1px solid black;"&gt;RESULT:&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="9" style="border: 1px solid black;"&gt;&lt;color style="color:blue;"&gt; PRINCIPAL'S REMARKS:&lt;/color&gt; &lt;b style="text-transform: uppercase;"&gt;&lt;/b&gt;&lt;/td&gt;
  &lt;td colspan="2" style="border: 1px solid black;"&gt;SIGN: &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://jsfiddle.net/missjargo/3p5ku1zh/41/" rel="nofollow noreferrer">https://jsfiddle.net/missjargo/3p5ku1zh/41/</a></p>
  <p>How can I force both the header and the table cell below to fit as one table?</p>