slickgrid - SlickGrid 旋转的列标题

Question

如何将列标题旋转 90 度？我已经尝试过了，但无法让它工作。

.slick-column-name {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    display: block;
    vertical-align: bottom;
}

Answer 1

对于那些尚未找到好的解决方案的人：

 /* Rotate the header*/
.slick-column-name {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    margin-top: 90px !important;
    font-size: 0.8em;

    display: block;


}
/* set the header height*/
.slick-header-columns, .slick-header-column {
    height: 100px !important;
    background-image: url('');
}

上面的 CSS 旋转标题名称，并将其向下移动 90 像素，将标题的高度调整为 100 像素。您可以将 90px 和 100px 更改为您想要的任何值。

Answer 2

如果您使用slick.grid.js 中<span>的标签替换带有标题名称的标签，它会起作用。<div>不知何故，转换仅适用于 div 标签。