Html CSS旋转/倾斜表格标题边框对齐

我需要制作倾斜/旋转的表格标题，如何使倾斜的内侧标题边框与表格单元格元素的垂直边框对齐

HTML:

---

将标题稍微移动一点，如

th.rotate > div {
      transform: 
        /* Magic Numbers */
        translate(-18px, 51px)
        /* 45 is really 360 - 45 */
        rotate(315deg);
      width: 30px;
    }

看看这个：

以下是我所做的：

1.删除了

th的高度

th.rotate {
    /* Something you can count on */
    white-space: nowrap;
}

2.添加了

transform origin

属性并更改了

translate

值

th.rotate > div {
  transform: 
    translate(-7px, -2px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
    transform-origin: left bottom;
    width: 30px;
}

选中此项：

th.rotate {
    /* Something you can count on */
    white-space: nowrap;
}

th.rotate > div {
  transform: 
    translate(-7px, -2px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
    transform-origin: left bottom;
    width: 30px;
}