☰

如何在 confuence 中创建垂直表格标题

tag-icon • tag-icon confluence
如何在 confuence 中创建垂直表格标题

有没有办法在汇合中创建垂直表标题？

我似乎也找不到 HTML 编辑按钮 - 我确信您可以在某个阶段编辑 HTML。

答案1

这是你的开始...

使用用户宏包装您想要的表格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>

它会产生类似这样的结果： 旋转的表格标题

您可能需要稍微改变 CSS，但这是一个好的开始。

答案2

这是一个不需要参数的版本。浏览器会自动计算高度和宽度。请注意，编辑器对列的大小有一些限制。将表格设置为响应式，让浏览器计算列宽。

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

答案3

通过转到 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>

答案4

我尝试了 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 中创建用户宏时，请务必选择“已渲染”。

相关内容