How do I create vertical table headings in confluence
Asked by suresh-bitbucket41:

Is there any way to create vertical table headings in confluence?

I have created user macro but it is not working.

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 <david@davidsimpson.me>## 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>


Answers:
author: Dee
body: Hello ps41,

I was able to create a user macro using your example,

in the macro definition i used ***Unrendered :*** ![Screen Shot 2019-07-26 at 2.28.53 pm.png](https://community.atlassian.com/t5/image/serverpage/image-id/61516iD6F3CBFDBD260ACD/image-dimensions/564x513?v=v2 "Screen Shot 2019-07-26 at 2.28.53 pm.png"):

I added the following html to the user macro body:

```
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
```

and I got this:

![Screen Shot 2019-07-26 at 2.25.27 pm.png](https://community.atlassian.com/t5/image/serverpage/image-id/61515iA2BA8B42AE87B3C3/image-dimensions/575x255?v=v2 "Screen Shot 2019-07-26 at 2.25.27 pm.png")

the text has rotated for me.. looks like all we need now is to figure out how to rotate the cells!

comments: author: suresh-bitbucket41
body: Hello Dee,

Thanks for your replay..!

If we add the HTML table in user macro body then it is working but we want to change the existing table header to vertical.


author: Dee
body: ```
## Macro title: My Macro
## Macro has a body: Y 
## Body processing: Selected body processing option
## Output: Selected output option
##
## Developed by: My Name
## Date created: dd/mm/yyyy
## Installed by: My Name

## This is an example macro
## @param Name:title=Name|type=string|required=true|desc=Your name
## @param Colour:title=Favourite Colour|type=enum|enumValues=red,green,blue|default=red|desc=Choose your favourite colour

<style>
.confluenceTable .confluenceTh {
position: relative;
}
.confluenceTable .confluenceTh strong {
writing-mode: vertical-rl;transform: rotate(180deg);white-space: nowrap;display: inline-block;overflow: visible;

}
</style>
```

Give that a shot, to make the titles vertical you need to **bold** them.

![Screen Shot 2019-07-31 at 11.28.28 am.png](https://community.atlassian.com/t5/image/serverpage/image-id/61917i0B97A30D5C9E3E2E/image-dimensions/571x312?v=v2 "Screen Shot 2019-07-31 at 11.28.28 am.png")

Note: This macro has no body and will affect all tables, row and column headers that have been bolded.


Tags: confluence-server

server