Vertical column header text (rotate 90 degrees)

Hi Stefan,

thanks for your question.

Yes, this is possible with some extra CSS code and some extra HTML in each table head cell.
Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-123 thead span {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    display: block;
    height: 100px;
    text-align: center;
}

and adjust the 123 to your table’s ID.
Additionally, wrap the cell content of each cell in the table head row with a <span> HTML tag, like

<span>Text</span>

After that, the text should be rotated. You might however have to play around with that value of 100px for the height, to make everything fit.

Regards,
Tobias

Tobias,

Thanks for your kind and quick reply. This solution works perfect, the text is rotated now. The first row is having different widths compared to the table. Is there a easy fix for this, or just style every row?

https://www.jouwexpert.nl/vergelijk-zonnepanelen/

Many thanks again!

Best regards,

Stefan

Hi Stefan,

the reason for that might be the “Horizontal Scrolling” feature that you are using. That’s not directly compatible with the rotated text, unfortunately. You’ll have to either deactivate that, or try to set fixed column widths for each column.

Regards,
Tobias