在可移植的列標題中旋轉自定義HTML

我想在我的手錶中旋轉col標題的html輸入。在可移植的列標題中旋轉自定義HTML

我已經做了以下內容：

$myTable.handsontable({ 
data: myData, 
colHeaders: colHeaderRenderer, 
colWidths: [....], 
columns: myColumns, 
cells: cellsRenderer, 
onBeforeChange: onBeforeChangeRenderer, 
onChange: onChangeRenderer 
});

由此colHeaderRenderer

function colHeaderRenderer(col) { 
    switch (col) { 
    ... 
    case 9: 
     return '<span class="headerRotate">test1</span>'; 
    case 10: 
     return '<span class="headerRotate">test2</span>'; 
    case 11: 
     return 'test3'; 
    } 
}

和headerRotate定義（根據（Vertical (rotated) text in HTML table））

.headerRotate { 
    -moz-transform: rotate(90.0deg); /* FF3.5+ */ 
    -o-transform: rotate(90.0deg); /* Opera 10.5 */ 
    -webkit-transform: rotate(90.0deg); /* Saf3.1+, Chrome */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 */ 
}

但文本（ test1，test2）仍然以正常方式顯示。雖然有一種暗示，當我使用螢火蟲時，某些東西會旋轉90度，但我在html dom中看不到它。

enter image description here

來源

2014-02-11 Manuel

實測值的溶液中，同時我打字。問題是，我忘了添加以下CSS定義之一：

display: block; 
display: inline-block; 
display: inline-flex;

加入一個定義的樣式後，文本得到了正確的旋轉。

來源

2014-02-11 09:15:22 Manuel

在可移植的列標題中旋轉自定義HTML

回答

相關問題