2012-03-29 69 views
5

如何將列標題旋轉90度?我試過這個,但一直沒有得到它的工作。SlickGrid旋轉的列標題

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

回答

0

,如果你在一個slick.grid.js標籤<div>更換<span>標籤與頭名它的工作原理。不知何故,轉換隻適用於div標籤。

+0

這可能是由於CSS的「顯示」規則。將這些跨度設置爲'display:block'應該使輪換工作。 – idbehold 2013-04-30 16:35:17

0

對於那些還沒有找到一個很好的解決方案:

/* 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旋轉頭名,並將其移下來90像素,大小它的頭在高度爲100像素的。您可以將90像素和100像素更改爲任何你想要的。