Wie erstelle ich vertrauenswürdige vertikale Überschriften?

Hier ist ein Anfang für Sie ...

Wickeln Sie die gewünschte Tabelle mit einem rotate-headersBenutzermakro ein.

Hier ist der 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> 

Es produziert etwas Ähnliches:

Möglicherweise müssen Sie das CSS etwas ändern, aber es ist ein guter Anfang.

Erstellen Sie ein Benutzermakro, indem Sie auf Confluence-Verwaltung -> Konfiguration -> Benutzermakros gehen. Fügen Sie das Makro in Ihre Seite ein und erstellen Sie Ihre Tabellen innerhalb des Makros.

Inspiriert von David Simpsons Makro, aber mit diesem CSS wird die Spaltenbreite nicht mehr auf die Breite des (nicht rotierten) Headertextes gesetzt, wodurch die Platzersparnis bei Verwendung von vertikalem Text aufgehoben wird.

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

Dies ist eine sehr geringfügige Änderung der Antwort von Tony Abbot.

Es scheint, dass Atlassian den Container innerhalb von <th> von div in <p> geändert hat. Ich habe auch eine kleine Änderung vorgenommen, damit nur die Spaltenüberschriften mit dem "tr: ​​first-parent" -selektor gedreht wurden.

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

Ich habe versucht, TonyAbbots und Josh's Interpretationen von dvdsmpsn zu beantworten, aber beide lieferten nicht das gewünschte Ergebnis. Ich denke, dass dies in Confluence auf Version 6.1.1 (die Version, die ich verwende) aktualisiert wird. Die Lösung von TonyAbbot richtet den Text nach der Breite aus, ändert jedoch nicht die Spaltenbreite und die Lösung von Josh dreht die Kopfzeilen nicht in vertikaler Richtung (wiederum kann dies auf ein Upgrade in Confluence zurückzuführen sein)

Stattdessen kam ich zu meiner eigenen Lösung mit den Antworten von dvdsmpsn und 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> 

Auch als Hinweis: Wählen Sie beim Erstellen des Benutzermakros in Confluence unbedingt "Gerendert" aus.

Wenn Sie den letzten Code in ändern, können .rotate-headers th > div { transform: translate(0px, $px) rotate(270deg); width: $px; } Sie auch @username im Header hinzufügen

Als ich dieses Makro zum ersten Mal ausprobierte, gab ich ihm falsche Parameter (Breite> Höhe) und fragte mich, warum die Überschriften verschwunden waren. Sie könnten versuchen, die Höhe in Abhängigkeit von $ body zu berechnen (nicht perfekt, da nicht alle Buchstaben 1em sind, sondern als Ausgangspunkt).

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