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:
Browser table headers:
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>