How to rotate cell text and adjust it's height?
How to rotate cell text and adjust it's height?
bert126
Posts: 2Questions: 1Answers: 0
I would like to rotate the text in certain cells by -90 degrees, as they are currently taking up too much space in width.
For testing purposes, I tried:
<span style="transform: rotate(-90deg);display: inline-block;">My Vertical Text</span>
It works well, except that the height of the cell is not adjusted and all the text ends up overlapping (see capture)
What is the correct way to do this? Thank you.
This question has an accepted answers - jump to answer
Answers
I'm not sure what CSS settings need to be in place for dynamically setting the row height. You could use CSS to set a specific height, for example:
https://live.datatables.net/liratogi/1/edit
Might be easier to use an ellipsis renderer. If you prefer to display rotated text then maybe @allan can offer suggestions.
Kevin
I'd need to see a test case showing the issue to get some idea of how it might be resolved. Off the top of my head I don't know I'm afraid.
Allan
The proposal from Kevin is great. Many thanks!
I've just modified the CSS a bit so that the height is now calculated automatically, which seems to be working.
https://live.datatables.net/pabaqego/1/
That said, I can't centre the text properly.
If anyone has an idea...
Set the text-alignment for the cell to be centered, which you can do with the DataTables
dt-body-centerclass: https://live.datatables.net/pabaqego/2/edit .That appears to work well in Firefox.
Allan