How do I add Vertical headers in dashboards?

[marios_kstone]

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?

[gmorris_splunk]

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;
}

[jincy_18]

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);
}

[marios_kstone]

Yes, I tried. The header is rotated but the columns width does not change. Also, the header overlaps other stuff on page... very weird

[jincy_18]

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.