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 は任意に変更できます。