Vertical Header for Tables

Casey Maynard
Contributor
February 14, 2018

In the script below, I have been able to generate vertical headers. But unfortunately, I am encountering a few issues that I cannot seem to resolve

Issue 1 - If I merge any of the cells the vertical text goes away for all the headers

Issue 2 - I would prefer to only have a few of the headers have vertical text, so I would like to determine how to configure the script to allow me to set which columns use the vertical text setting

Issue 3 - How to bottom justify the vertical text, because if you have header text that has multiple lines I would like the text to 'wrap' and then bottom justify

Issue 4 - How do I remove the text 'pixels|default=100 pixels|default=30' that is above the table

I found this User Macro in another forum

## 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>
## Edited by: Eric Maras <ericmaras@gmail.com>
## 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>

1 answer

1 vote
David at David Simpson Apps
Atlassian Partner
November 29, 2018

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events