-1

I am working on a project that builds an HTML template and builds a pdf using abcPDF. The issue I am having is that I am trying to create a table with vertical column headers.

The HTML that I am passing in works perfectly fine if I render it directly in a browser, but when I view a PDF that is generated, the headers are horizontal.

PDF table headers:

enter image description here

Browser table headers:

enter image description here

Here is a simplified table that has the same properties of the full tables. However, when I try to insert this table into the PDF, it does not get all of the styling. The borders work as expected as well as other properties, but transform and writing-mode do not seem to work.

Note: I have tried this both inline CSS as well as inside a tag

table {
  box-sizing: border-box;
  border-collapse: collapse; 
  width: 15% ;
  border: 1px solid #dee2e6;
}

.border {
  text-align: center; border: 1px solid lightgrey;
}

.rotate {
  writing-mode: vertical-rl; 
  transform: rotate(180deg); 
}
<table>
  <thead>
    <tr>
      <th class="border"><span class="rotate">Col 1</span></th>
      <th class="border"><span class="rotate">Col 2</span></th>
      <th class="border"><span class="rotate">Col 3</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border">A</td>
      <td class="border">B</td>
      <td class="border">C</td>
    </tr>
  </tbody>
</table>
dwewers
  • 67
  • 6

0 Answers0