title: pdf download file does not respond to CSS
body: <p>I have table headers that I styled with writing-mode: vertical-lr. It displays perfectly on screen.</p>
  <p><a href="https://i.stack.imgur.com/cQ6Vm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cQ6Vm.jpg" alt="vertical header table" /></a></p>
  <p>I used the same CSS to style the PDF file. However, the headers were not displayed vertically. In fact, it doesn't respond to many CSS styling.</p>
  <p><a href="https://i.stack.imgur.com/uWUid.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uWUid.jpg" alt="No style table" /></a></p>
  <p>What do I do to make the PDF file display like the one onscreen upon download?</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&gt;
  &lt;thead&gt;
                      &lt;tr&gt;
                           &lt;th style="border: 1px solid black; font-size:11px;width:120px;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:50px;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:50px;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:50px;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:50px;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:50px;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:50px;;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:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;"&gt;
                                                      CA TOTAL 60%
                                                  &lt;/th&gt;
                                                  &lt;th style="border: 1px solid black; font-size:11px;width:50px;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:50px;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:50px;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:50px;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:50px;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:50px;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:50px;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;/table&gt;</code></pre>
  </div>
  </div>
  </p>