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>
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.