SlickGrid 旋转的列标题答案

【问题标题】：SlickGrid-rotated column headersSlickGrid 旋转的列标题
【发布时间】：2012-04-12 15:49:39
【问题描述】：

如何将列标题旋转 90 度？我已经尝试过了，但无法让它工作。

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

【问题讨论】：

标签： slickgrid tableheader

【解决方案1】：

如果您在 slick.grid.js 中将 <span> 标记替换为带有 <div> 标记的标题名称，则它可以工作。不知何故，转换仅适用于 div 标签。

【讨论】：

这可能是由于 CSS display 规则。将这些跨度设置为 display: block 应该可以使旋转正常工作。

【解决方案2】：

对于那些尚未找到好的解决方案：

 /* 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 像素。您可以将 90px 和 100px 更改为您想要的任何值。

【讨论】：

这很好用，除了我设置了所有的 transform-origin: 0 0;