## 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>
Он производит что-то похожее на это:
Возможно, вам придется несколько изменить CSS, но это хорошее начало.
0
Tony Abbott
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: $px; white-space: nowrap; } .vertical-headers th div { transform: translate(0px, $px) rotate(270deg); width: $px; } </style> <div class="vertical-headers">$body</div>
0
Josh
Это очень незначительное изменение в ответе Тони Эббота.
Кажется, Atlassian изменил контейнер внутри своего <th> с div на <p>. Я также сделал небольшую настройку, чтобы повернуть только заголовки столбцов с помощью селектора tr: first-parent.
## 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: $px; white-space: nowrap; } .vertical-headers tr:first-child th p { transform: translate(0px, $px) rotate(270deg); width: $px; } </style> <div class="vertical-headers">$body</div>
0
Eric Maras
Я попробовал интерпретацию ответа dvdsmpsn ТониАббота и Джоша, но оба не дали желаемого результата. Я думаю, что это может быть связано с обновлением в Confluence до 6.1.1 (версия, которую я использую). Решение TonyAbbot выравнивает текст в соответствии с шириной, но не меняет ширину столбца, а решение Джоша не поворачивает заголовки по вертикали (опять же, это может быть связано с обновлением в Confluence)
Вместо этого я пришел к своему собственному решению, используя ответы dvdsmpsn и TonyAbbot:
## 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, $px) rotate(270deg); width: $px; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */ } .rotate-headers th { height: $px; white-space: nowrap; } .rotate-headers th div { transform: translate(0px, $px) rotate(270deg); width: $px; } </style> <div class="rotate-headers">$body</div>
Также как примечание: не забудьте выбрать «Rendered» при создании пользовательского макроса в Confluence.
0
Juergen Egeling
если вы измените последний код на .rotate-headers th > div { transform: translate(0px, $px) rotate(270deg); width: $px; } Вы также можете добавить @username в заголовок
0
anonym
Когда я впервые попробовал этот макрос, я дал ему неправильные параметры (ширина> высота) и удивился, почему исчезли заголовки. Вы можете попытаться вычислить высоту в зависимости от $ body (не идеально, так как не все буквы 1em, но в качестве отправной точки)
## 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 #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, $em) rotate(270deg); width: $em; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */ } .rotate-headers th { height: $em; white-space: nowrap; } .rotate-headers th > div { transform: translate(0px, $em) rotate(270deg); width: $em; } </style> <div class="rotate-headers">$body</div>
