在handsontable列标题中旋转自定义HTML

Question

我想在我的动手中旋转col标头的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中看到它。

Answer 1

在我打字时找到解决方案。问题是，我忘了添加以下css定义之一：

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

在样式中添加定义后，文本正确旋转。