How to implement vertical column header in a table

1 post / 0 new
oyvind
oyvind's picture
How to implement vertical column header in a table

If you have a table with mostly numbers and/or checkboxes and you want to save som space in your table listing, it can save you some space if you implements vertical column headers in your table.

Here is how you do it in 2 short steps:

  1. In dashbord edit mode, right click on any element and select Edit Dashboard Properties
    • In the CSS tab, implement this code:
      • .myTable .HeadingCell a{ writing-mode: vertical-rl; text-orientation: sideways; }
  2. On your designated data table element, rigth click and select Edit Element Container
    • In the CSS Class section in the Advanced tab, implement the class name:
      • myTable

Tip 1: Experiment by changing "sideways" to "upright"

Tip 2: Uncheck "Allow wrapping" in Column Properties if column header text is too long

NB1! "Enable sorting on columns" in Table Properties must be checked (this is default)

NB2! Vertical column headers does not work on pivot tables