Hi,
this should be possible with some “Custom CSS” code. Just paste the following into the “Custom CSS” textarea on the “Plugin Options” screen of WP-Table Reloaded. Change the 123 to the ID of your table.
.wp-table-reloaded-id-123 th {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
This is take from http://www.thecssninja.com/css/real-text-rotation-with-css, and from what I understand, this might not work with all versions of all browsers, just to let you know.
Regards,
Tobias
Thanks for the prompt response Tobias,
That has sort of worked but it doesn’t display properly and the text is a different colour to the cell background. See: http://www.felixstowefootball.co.uk/seniors/first-team/appearances/
What am I doing wrong.
(Incidentally, I changed the rotation to 270 to get the text running upwards rather than downward and that seems to have worked.)
Hi,
thanks for the link.
As it seems, this command really rotates the entire header cell, and not just the content. It might be possible to fix this with a workaround.
1. Wrap the texts in the header cells in a HTML <span> tag, i.e. First Name becomes <span>First Name</span> and so on.
2. Change the first line in the CSS code from above to
.wp-table-reloaded-id-123 th span {
Best wishes,
Tobias
Thanks Tobias,
I’ve done the first four columns and the result is interesting! We seem to have confused the order of the wording and the words now overlap each other. You can see what’s happened if you re-visit my page.
I’m viewing in Firefox, by the way.
Regards,
Clive.
Tobias,
Can we increase, or manually set, the height of the header row? If made sufficiently tall the wording will not wrap and that should do the job.
Regards,
Clive.
Hi,
you can try to increase the height with this:
.wp-table-reloaded-id-123 .row-1 {
height: 100px!important;
}
Regards,
Tobias
Hi Tobias,
That lets me set the height of the row, which is great. But I still have the word wrapping problem, even if I set the height at 500px. It seems that wherever I have two words in the cell it throws the error (which is still visible on my page).
I imported this table from a CSV file. Does this make a difference?
Regards,
Clive.
Hi,
ok, you could try to remove the line breaks with this:
.wp-table-reloaded-id-123 th span {
white-space: nowrap;
}
No, it does not matter where your data comes from (CSV import or manual input). It is treated the same by the browser.
Just to let you know: In Google Chrome, the text is not rotated, which seems to be related to the lack of support for this feature, as mentioned in the link I posted above.
Regards,
Tobias
Hi Tobias,
That has worked a treat, Thank You. I now just need to work out why my columns aren’t all the same width (cols 3 – 16). I have set them all to 5px and added the ‘”bAutoWidth”: false’ statement in, but somehow its not working on this particular table. I have done it on another table, so I’ve managed to manually set column widths. It’s just failing me on this one.
Regards,
Clive.
Hi,
I believe that this is related to the rotation of the text. The width seems to be influenced by that. I tried a few things but also can’t find a working solution 🙁
Regards,
Tobias
