Como faço para criar títulos de tabelas verticais em confuência

Question

Existe alguma maneira de criar títulos de tabelas verticais na confluência?

Eu também não consigo encontrar o botão de edição HTML - eu tinha certeza que você poderia editar o HTML em um estágio.

    

Answer 1

Aqui está um começo para você ...

Quebra a tabela que você quer com uma macro de usuário rotate-headers .

Este é o código:

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

Produz algo parecido com isso:

Você pode ter que alterar um pouco o CSS, mas é um bom começo.

    

Answer 2

Crie uma macro de usuário indo para a administração do Confluence - > Configuração - > Macros do usuário. Insira a macro na sua página e crie suas tabelas dentro da macro.

Inspirado na macro de David Simpson, mas com este CSS a largura da coluna não está mais definida para a largura do texto do cabeçalho (não rotacionado) que negou a economia de espaço do uso de texto vertical.

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

    

Answer 3

Esta é uma pequena alteração na resposta de Tony Abbot.

Parece que a Atlassian alterou o contêiner dentro de seus < th > de div para < p & gt ;. Eu também fiz um ligeiro ajuste para fazer com que apenas os cabeçalhos das colunas fossem girados usando o seletor "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>

    

Answer 4

Eu tentei interpretações de TonyAbbot e Josh de resposta dvdsmpsn, mas ambos não forneceram o resultado desejado. Eu acho que isso poderia ser devido a atualização no Confluence para 6.1.1 (A versão que estou usando). A solução de TonyAbbot alinha o texto de acordo com a largura, mas não altera a largura da coluna e a solução de Josh não gira os cabeçalhos verticalmente (novamente, isso pode ser devido a um upgrade no Confluence)

Em vez disso, cheguei à minha própria solução usando as respostas do dvdsmpsn e do 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>

Além disso, como nota: selecione "Renderizado" ao criar a macro do usuário no Confluence.

    

Answer 5

se você alterar o último código para %código% Você também pode adicionar @ nome_do_usuário no cabeçalho

    

Answer 6

Quando eu tentei pela primeira vez esta macro, eu dei a ela parâmetros errados (largura > altura) e me perguntei por que as manchetes desapareceram. Você poderia tentar calcular a altura dependendo do $ body (não perfeito, pois nem todas as letras são 1em, mas como ponto de partida)

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