Question

如何将列标题旋转90度？我试过这个，但一直无法让它发挥作用。

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

Answer 1

如果您使用slick.grid.js中带有<span>标记的标题名称替换<div>标记，则此方法有效。某种方式转换只适用于div标签。

Answer 2

对于那些还没有找到一个好的解决方案：

 /* 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旋转标题名称，并将其向下移动90px，它将标题的大小调整为100px。您可以将90px和100px更改为您想要的任何内容。

SlickGrid旋转的列标题

2 个答案: