SlickGrid Rotated Column Headers

Question

How can I rotate the column headers 90 degrees? I tried this but couldn't get it to work.

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

Answer 1

It works if you replace the tag <span>with the header name with the tag <div>in slick.grid.js. Anyway, the transformation only works for div tags.

Answer 2

For those who have not yet found a good solution:

 /* 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('');
}

The above CSS rotates the title name and moves it down 90 pixels, it increases the size of the title 100px in height. You can change 90px and 100px to whatever you want.