Html 表格标题中的CSS转换调整标题单元格的大小

我试图在表格单元格中显示旋转的文本。使用“旋转”时，表格单元格不会保持其原始宽度，除非指定“位置：绝对”。这样，包含文本的div就没有对齐，如小提琴所示

文本怎么可能显示在表格单元格之外？如何使用固定宽度/高度的单元格将其放入表格单元格中？如果没有位置：绝对，我无法保持单元格的固定宽度

JSFiddle：

代码：

.分配表{ 高度：150像素； } .分配表tr{ 高度：150像素； } .分配表tr td{ 宽度：50px； 高度：150像素； 边框：1px纯黑； } .分配表tr td div{ 变换：旋转-90度； 字体大小：12px； 宽度：150px； 高度：50px； 位置：绝对位置； } 评分周期中的分数/分数 任务1

---

可以调整变换原点，然后应用平移：

.分配表{ 高度：150像素； } .分配表tr{ 高度：150像素； } .分配表tr td{ 宽度：50px； 高度：150像素； 边框：1px纯黑； } .分配表tr td div{ 变换：旋转-90度平移-50%； 字体大小：12px； 宽度：150px； 高度：50px； 位置：绝对位置； 变换原点：左上； } 评分周期中的分数/分数 任务1

---

我能够将文本与：transform:rotate-90deg translateY-75%translateX20%对齐@是的，你可以找到很多方法：但最好先调整变换原点来简化；