6

Is there anyway to create vertical table headings in confluence?

I also can't seem to find the HTML edit button - I was sure you could edit the HTML at one stage.

7 Answers 7

6

Here's a start for you...

Wrap the table you want with a rotate-headers user macro.

Here's the code:

## Macro: rotate-table-headers
## Macro title: A macro for rotating all the headers in a table
## Macro has a body: Y
## Body processing: n/a
## Output: HTML
##
## Developed by: David Simpson <[email protected]>
## Date created: 2013-11-20
## Installed by: My Name

## @param height:title=Height|type=string|required=true|desc=e.g.100px


<style>
    /** @see: http://css-tricks.com/snippets/css/text-rotation/ */
    .rotate-headers th div.tablesorter-header-inner {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);

        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
    }
    .rotate-headers th {
        vertical-align:middle;
        height: $paramheight;
    }
</style>

<div class="rotate-headers">$body</div>

It produces something similar to this: rotated table headers

You may have to alter the CSS somewhat, but its a good start.

1

Here is a version that does not require parameters. The browser automatically calculates the height and width. Note that the editor imposes some limits on how small you can make the columns. Set the table to responsive to let the browser calculate the column widths.

## Macro: rotate-table-headers
## Macro title: A macro for rotating all the headers in a table
## Macro has a body: Y
## Body processing: n/a
## Output: HTML
##
## Developed by: David Simpson <[email protected]>
## Date modified: 2019-11-26
## Updated By: Harm Berntsen <[email protected]>
## Installed by: My Name

## @noparams

<style>
    .rotate-headers th div.tablesorter-header-inner {
       writing-mode: vertical-rl;
       transform: rotate(180deg);
    }
    .rotate-headers th {
        vertical-align:bottom;
    }
</style>

<div class="rotate-headers">$body</div>
0

Create a user macro by going to Confluence administration -> Configuration -> User macros. Insert the macro into your page and create your tables inside the macro.

Inspired by David Simpson's macro, but with this CSS the column width is no longer set to the width of the (unrotated) header text which negated the space saving of using vertical text.

## Macro: vertical-table-headers
## Macro title: A macro for rotating all the headers in a table
## Macro has a body: Y
## Body processing: Rendered
## Output: HTML
##
## Developed by: Tony Abbott
## Date created: 2016-04-07
## Installed by: Tony Abbott

## @param height:title=Height|type=int|required=true|desc=Header height in pixels|default=100
## @param width:title=Width|type=int|required=true|desc=Header width in pixels|default=30

#set( $Integer = 0 )
#set( $height = $Integer.parseInt($paramheight) )
#set( $width = $Integer.parseInt($paramwidth) )
#set( $shift =  $height - $width )

<style>
.vertical-headers th {
  height: ${height}px;
  white-space: nowrap;
}
.vertical-headers th div {
  transform: translate(0px, ${shift}px) rotate(270deg);
  width: ${width}px;
}
</style>

<div class="vertical-headers">$body</div>
0

This is a very minor change to Tony Abbot's answer.

It seems Atlassian changed the container inside of their <th> from div to <p>. I also made a slight tweak to make it so only the column headers were rotated using the "tr:first-parent" selector.

## Macro: vertical-column-header-table
## Macro title: A macro for rotating all the column headers in a table
## Macro has a body: Y
## Body processing: Rendered
## Output: HTML
##
## Developed by: Tony Abbott
## Editied by: Josh Ginter
## Date created: 2017-04-20
## Installed by: Josh Ginter

## @param height:title=Height|type=int|required=true|desc=Header height in pixels|default=100
## @param width:title=Width|type=int|required=true|desc=Header width in pixels|default=30

#set( $Integer = 0 )
#set( $height = $Integer.parseInt($paramheight) )
#set( $width = $Integer.parseInt($paramwidth) )
#set( $shift =  $height - $width )

<style>
.vertical-headers tr:first-child th {
  height: ${height}px;
  white-space: nowrap;
}
.vertical-headers tr:first-child th p {
  transform: translate(0px, ${shift}px) rotate(270deg);
  width: ${width}px;
}
</style>

<div class="vertical-headers">$body</div>
0

I tried TonyAbbot's and Josh's interpretations of dvdsmpsn answer, but both did not provide the desired result. I think this could be due to upgrade in Confluence to 6.1.1 (The version I am using). TonyAbbot's solution aligns the text according to the width, but does not change the column width and Josh's solution does not rotate the headers vertically (again this may be due to an upgrade in Confluence)

Instead I came to my own solution using dvdsmpsn's and the TonyAbbot's answers:

## Macro: rotate-table-headers
## Macro title: A macro for rotating all the headers in a table
## Macro has a body: Y
## Body processing: n/a
## Output: HTML
##
## Developed by: David Simpson <[email protected]>
## Edited by: Eric Maras <[email protected]>
## Date created: 2017-06-27

## @param height:title=Height|type=int|required=true|desc=Header height in 
pixels|default=100
## @param width:title=Width|type=int|required=true|desc=Header width in 
pixels|default=30

#set( $Integer = 0 )
#set( $height = $Integer.parseInt($paramheight) )
#set( $width = $Integer.parseInt($paramwidth) )
#set( $shift =  $height - $width )

<style>
    /** @see: http://css-tricks.com/snippets/css/text-rotation/ */
    .rotate-headers th div.tablesorter-header-inner {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: translate(0px, ${shift}px) rotate(270deg);
    width: ${width}px;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* 
Internet Explorer */
    }
    .rotate-headers th {
        height: ${height}px;
        white-space: nowrap;
    }
    .rotate-headers th div {
        transform: translate(0px, ${shift}px) rotate(270deg);
        width: ${width}px;
    }
</style>

<div class="rotate-headers">$body</div>

Also as a note: be sure to select 'Rendered' when creating the user macro in Confluence.

0

if you change the last Code to .rotate-headers th > div { transform: translate(0px, ${shift}px) rotate(270deg); width: ${width}px; } You can also add @username in the header

0

When I first tried this macro I gave it wrong parameters (width > height) and wondered why the headlines disappeared. You could try to calculate the height depending on $body (not perfect as not all letters are 1em, but as a starting point)

## Macro: rotate-table-headers
## Macro title: A macro for rotating all the headers in a table
## Macro has a body: Y
## Body processing: n/a
## Output: HTML
##
## Developed by: David Simpson <[email protected]>
## Edited by: Eric Maras <[email protected]>
## Date created: 2017-06-27

#set($headlines = $body.split("<th class=\"confluenceTh\">"))

#set($max_length = 0)
#set($is_first = true)

#foreach($headline in $headlines)
    #if($is_first)
        #set($is_first = false)
    #else
        #set($length = $headline.indexOf("</th>"))
        #if($max_length < $length)
            #set($max_length = $length)
        #end
    #end
#end

#set( $height =  $max_length)
#set( $width = 1 )
#set( $shift =  $height - $width )

<style>
    /** @see: http://css-tricks.com/snippets/css/text-rotation/ */
    .rotate-headers th div.tablesorter-header-inner {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: translate(0px, ${shift}em) rotate(270deg);
    width: ${width}em;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* 
Internet Explorer */
    }
    .rotate-headers th {
        height: ${height}em;
        white-space: nowrap;
    }
    .rotate-headers th > div {
        transform: translate(0px, ${shift}em) rotate(270deg);
        width: ${width}em;
    }
</style>

<div class="rotate-headers">$body</div>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .