Have rotated column headers

Question

I am trying to add a class to each table header so that they can be rotated on a angle at the top of the table. The table headers are populated from an array of items. Currently the code i have has roated the full table head not the individual table headers

function renderMatrix(){
    var actions = getActions();
    for(var i=0;i<actions.length;i++){
        $("#actionTable>thead>tr").append("<th>"+ actions[i] +"</th>");
        $("#actionTable>thead>tr").addClass("rotateHeader")
        
    }

---

.rotateHeader
{transform: 
    translate(25px, 51px)

    rotate(315deg);
  width: 30px;
}

What would be the best way to go about making it so the only things rotated is the text in the column headers.

Answer 1

Try

$("#actionTable").find("th").css('-webkit-transform', 'rotate(315deg)')