I need assistance with rotating a table header.
https://i.stack.imgur.com/hcvxx.png
The HTML th elements within the thead section are described as follows:
<th>
<span class="rotate-all">Period</span>
</th>
<th>
<span class="rotate-all">Location</span>
</th>
<th>
<span class="rotate-all">Capacity (kWp)</span>
</th>
<th>
<span class="rotate-all">Year 2016</span>
</th>
<!-- omit -->
I am attempting to rotate the span within each th element by 90 degrees, but I am facing difficulty achieving this effect through CSS.
Additional Information:
Creating HTML views using 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 adjustments should I make in the CSS code to achieve the desired rotation effect?