Rotated text in Header starts in the row below

So i tried to rotate the text in the header 90° and the rotatinag itself worked rather well. Now i have the problem that the text isnt within the designnated cells but seems to have been moved to the bottom so that it starts in the row below.

My custom CSS is:

.tablepress-id-15 td,
.tablepress-id-15 tr,
.tablepress-id-15 tbody td,
.tablepress-id-15 thead th,
.tablepress-id-15 tfoot th {
border: 1px solid #DDDDDD;
}

.tablepress-id-15 .row-1 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;
text-align: top;
vertical-align: top;
}

.tablepress-id-15 thead th {
height: 220px;
}

.tablepress-id-15 .column-1 {
width: 50px;
}

.tablepress-id-15 .column-2 {
width: 50px;
}

.tablepress-id-15 .column-3 {
width: 50px;
}

.tablepress-id-15 .column-4 {
width: 50px;
}

Additionally, i still cant seem to reduce the column width more than was possible before rotating, which results in the coloumns being way wider than they need to be.

• This topic was modified 4 years, 9 months ago by salladora.
• This topic was modified 4 years, 9 months ago by salladora.