I am trying to override the standard CSS to format table header in order to rotate the text by 90 degrees. I need this on some numeric tables with a lot of columns. Unfortunately just adding "transform: rotate(90deg);" to the "th" CSS does not seem to be enough as the header is rotated but the column width is preserved. Anyone successfully managed to achieve this?
Anyone still looking at doing this try:
#PivotView .table th
{
writing-mode: vertical-rl;
transform: rotate(0deg);
}
#PivotView .table th:nth-child(1) ### This puts first column to horizontal ###
{
writing-mode: horizontal-tb;
font-size:20px !important;
}
Hi,
Have you tried using width and height attributes in the css. It should do the trick for you. Do the same for td elements if required.
th
{
width: 50px !important;
height: 30px !important;
transform: rotate(90deg);
}
Yes, I tried. The header is rotated but the columns width does not change. Also, the header overlaps other stuff on page... very weird
Hi Marios, Could share a screenshot, for understanding this better? cause I was able to fix this issue with width and height parameters in th/td and it worked for me.