web-dev-qa-db-ja.com

Confluenceで垂直方向の表見出しを作成するにはどうすればよいですか

とにかく合流で垂直の表見出しを作成する方法はありますか？

また、HTML編集ボタンが見つからないようです。HTMLを一度に編集できると確信していました。

confluence
5
TheLearner

これがあなたのスタートです...

必要なテーブルをrotate-headersユーザーマクロでラップします。

コードは次のとおりです。

## 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 <[email protected]>
## 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>

これは次のようになります。 rotated table headers

CSSを多少変更する必要があるかもしれませんが、それは良いスタートです。

4
dvdsmpsn

これはパラメータを必要としないバージョンです。ブラウザは高さと幅を自動的に計算します。エディターは、列をどれだけ小さくできるかについていくつかの制限を課していることに注意してください。ブラウザーが列幅を計算できるように、テーブルをレスポンシブに設定します。

## 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 <[email protected]>
## Date modified: 2019-11-26
## Updated By: Harm Berntsen <[email protected]>
## Installed by: My Name

## @noparams

<style>
    .rotate-headers th div.tablesorter-header-inner {
       writing-mode: vertical-rl;
       transform: rotate(180deg);
    }
    .rotate-headers th {
        vertical-align:bottom;
    }
</style>

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

最後のコードを.rotate-headers th > div { transform: translate(0px, ${shift}px) rotate(270deg); width: ${width}px; }に変更した場合ヘッダーに@usernameを追加することもできます

0
Juergen Egeling

これは、トニー・アボットの答えに対する非常に小さな変更です。

アトラシアンは<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: ${height}px;
  white-space: nowrap;
}
.vertical-headers tr:first-child th p {
  transform: translate(0px, ${shift}px) rotate(270deg);
  width: ${width}px;
}
</style>

<div class="vertical-headers">$body</div>
0
Josh

Confluence管理->構成->ユーザーマクロに移動してユーザーマクロを作成します。マクロをページに挿入し、マクロ内にテーブルを作成します。

David Simpsonのマクロに触発されましたが、このCSSでは、列の幅が（回転されていない）ヘッダーテキストの幅に設定されなくなり、垂直テキストを使用することによるスペースの節約が無効になりました。

## 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: ${height}px;
  white-space: nowrap;
}
.vertical-headers th div {
  transform: translate(0px, ${shift}px) rotate(270deg);
  width: ${width}px;
}
</style>

<div class="vertical-headers">$body</div>
0
Tony Abbott

私がこのマクロを初めて試したとき、私はそれに間違ったパラメーター（幅>高さ）を与え、なぜ見出しが消えたのか疑問に思いました。 $ 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 <[email protected]>
## Edited by: Eric Maras <[email protected]>
## 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, ${shift}em) rotate(270deg);
    width: ${width}em;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* 
Internet Explorer */
    }
    .rotate-headers th {
        height: ${height}em;
        white-space: nowrap;
    }
    .rotate-headers th > div {
        transform: translate(0px, ${shift}em) rotate(270deg);
        width: ${width}em;
    }
</style>

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

私はTonyAbbotとJoshのdvdsmpsn回答の解釈を試みましたが、どちらも望ましい結果をもたらしませんでした。これは、Confluenceで6.1.1（私が使用しているバージョン）にアップグレードしたことが原因である可能性があります。 TonyAbbotのソリューションは、幅に応じてテキストを整列しますが、列の幅は変更せず、Joshのソリューションはヘッダーを垂直方向に回転しません（これも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 <[email protected]>
## Edited by: Eric Maras <[email protected]>
## 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>

また、注意として：Confluenceでユーザーマクロを作成するときは、必ず[レンダリング済み]を選択してください。

0
Eric Maras