如何使用 javascript 使表格的标题具有垂直的、有角度的文本？答案

【问题标题】：How can I use javascript to make the headings of a table have vertical, angled text?如何使用 javascript 使表格的标题具有垂直的、有角度的文本？
【发布时间】：2021-01-11 15:12:03
【问题描述】：

我试图让表格标题行中的名称从底部以一个小角度垂直排列。

我尝试让文本垂直运行：

displayTable.rows[i].cells[j].style.writingMode="vertical-rl";

这适用于 Firefox，但不适用于 Chrome 所以我使用了以下代码：

displayTable.rows[i].cells[j].style.whiteSpace = 'nowrap';
displayTable.rows[i].cells[j].style.transformOrigin = "0% 100%";
displayTable.rows[i].cells[j].style.transform = 'rotate(-80deg)';

几乎可以工作（见下图）

问题是文本偏移了一列（根据图像）。所以我尝试了以下代码：

displayTable.rows[i].cells[j].style.left = (displayTable.rows[i].cells[j].offsetLeft + tempp) + 'px';

尝试将文本向右移动（因为 tempp 设置为列宽）

我也试过下面的代码：

displayTable.rows[i].cells[j].border="0";

尝试移除边框。但是，这两行都没有任何效果。

【问题讨论】：

标签： javascript css css-tables

【解决方案1】：

原始代码的问题是旋转和平移的变换是分开的，当它们需要在一个单一的变换中时，例如：

displayTable.rows[i].cells[j].style.transform = ("rotate(-80deg) translateX(3px) translateY("+temppx+")") ;

没有删除边框的原因是缺少 .style。应该是：

displayTable.rows[i].cells[j].style.border="0";

【讨论】：