SlickGrid-rotated column headers

问题

How can I rotate my column headers 90 degrees? I've tried this, but haven't been able to get it to work.

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

回答1:

For those has 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 header name, and moves it down 90px, it sizes the header to be of 100px in height. You can change the 90px and 100px to whatever you want.

回答2:

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

来源：https://stackoverflow.com/questions/9917916/slickgrid-rotated-column-headers