Các tiêu đề cột xoay của SlickGrid

Question

Làm cách nào để xoay các tiêu đề cột 90 độ? Tôi đã thử điều này, nhưng không thể làm cho nó hoạt động được.

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

Answer 1

Nó hoạt động nếu bạn thay thế thẻ <span> với tên tiêu đề với một thẻ <div> trong slick.grid.js. Bằng cách nào đó, chuyển đổi chỉ hoạt động cho các thẻ div.

Answer 2

Đối với những người vẫn chưa tìm ra giải pháp tốt:

/* 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 trên quay tên tiêu đề, và di chuyển nó xuống 90px, nó kích thước tiêu đề là của 100px chiều cao. Bạn có thể thay đổi 90px và 100px thành bất kỳ thứ gì bạn muốn.