I have a table header.
The HTML th elements which in thead are defined as follows:
<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 -->
I am trying to rotate the span in th with 90-degrees, but still can't rotate span via CSS.
Details:
Render HTML views with Javascript:
var makeTable = function (tableId, className, headerArray, contentArray) {
return "<table class='" + className + "' id='" + tableId + "'>" + makeHeader(headerArray) + makeContentTr(contentArray) + "</table>";
}
var makeHeader = function (headerArray) {
if (headerArray != undefined && headerArray != null && headerArray != "") {
return "<thead><tr>" + makeHeaderContent(headerArray) + "</tr></thead>";
} else {
return "";
}
};
var makeHeaderContent = function (headerArray) {
var header = [];
//Add an empty header to the first column if selectColumn option is true
if (selectColumn) {
headerArray = headerArray.slice();
//Adds new items to the beginning of an array
headerArray.unshift("<input type=\"checkbox\" class=\"select-all\" />");
}
for (var i = 0; i < headerArray.length; i++) {
//Adds new items to the end of an array
header.push("<th><span class=\"rotate-all\">" + headerArray[i] + "</span></th>");
}
return header.join(""); //Joins the elements of an array into a string
}
CSS Code:
.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;
}
What do I need to change in the CSS to make this work?
