I'm trying to make a table layout where the table head has vertical written text.
The design looks like this:
I tried it with writing-mode: sideways-lr but jsPDF, which i use to convert the table to a PDF file does not recognize that. So i started using a normal Bootstrap 5 Table and rotated the table heads with css <th style="transform-origin: center; transform: rotate(-90deg);">
But now it looks like this:
The Problem now is that i cant get the items closer together and the first item expanding as much as it can to fill the empty space, so they would look like in the design from the first picture. So i would be limited to a very small amount of head items.
Does anyone know how the HTML and CSS has to be, to make something like this?