Javascript HTML<；thead>；文本旋转

我有一个表格标题

HTML

th

元素在

thead

中定义如下：

<th>
    <span class="rotate-all">期數</span>
</th>
<th>
    <span class="rotate-all">位置</span>
</th>
<th>
    <span class="rotate-all">設置容量 (kWp)</span>
</th>
<th>
    <span class="rotate-all">2016年</span>
</th>
<!-- omit -->

CSS代码：

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

---

我需要在CSS中更改什么才能使其工作？

转换属性不适用于内联元素，如下所述：

---

transform

属性不适用于内联元素，如下所述：

---

将

display:inline block

应用于

span

标记…将

display:inline block

应用于

span

标记。。。。

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

.rotate-all {
    display: block;
}