Заголовки столбцов с поворотом 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 поворачивает имя заголовка и перемещает его на 90px, размер заголовка должен быть 100px в высоту. Вы можете изменить 90px и 100px на любое другое.

Answer 2

Это работает, если вы замените <span> тег с именем заголовка с <div> тег в slick.grid.js. Каким-то образом преобразование работает только для тегов div.