Заголовки столбцов с поворотными кольцами

Question

Как я могу поворачивать заголовки столбцов на 90 градусов? Я пробовал это, но не смог заставить его работать.

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

Answer 1

Это работает, если вы замените <span> тег с именем заголовка с <div> тега в slick.grid.js. Так или иначе трансформация работает только для тегов 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 на все, что хотите.