Поверните пользовательский HTML в ручном заголовке столбца

Question

Я хотел бы повернуть вкладку html заголовка col в моем мобильном.

Я сделал следующее:

$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 градусов, когда я использую firebug, но я не вижу его внутри html dom.

Answer 1

Найдено решение, пока я печатал. Проблема заключалась в том, что я забыл добавить одно из следующих определений CSS:

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

После добавления определения стиля, текст был повернут правильно.