已旋转列 headers

Question

我正在尝试为每个 table header 添加一个 class，以便它们可以在 table 的顶部旋转一个角度。 table header 是从项目数组中填充的。目前我的代码已经旋转了整个 table 头部而不是个人 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;
}

制作它的最佳方法是什么，所以唯一旋转的是 headers 列中的文本。

Answer 1

尝试

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

已旋转列 headers

Have rotated column headers

css

jquery

html-table

tableheader