I have created one macro for vertical headers when heading goes long header go wider

Shreeyansh Singh

HI ,

 

I have macro for vertical headers but when i increase the length of heading the width goes wider , how i can reduce the width of the header column . 

 

 

<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=6); /* Internet Explorer */
}
.rotate-headers th {
vertical-align:middle;
height: $paramheight;
}
</style>

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

DPKJ

Here is answer from `Superuser` which I have used it earlier

## @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>

 

Here is link to post - https://superuser.com/questions/741451/how-do-i-create-vertical-table-headings-in-confuence%C2%A0

 

You can try different one if that works for you.