Html 表格单元格中旋转文本的边距/填充

我有一个标题中有旋转文本的表格。我从其他地方借用了CSS，并修改为旋转90度而不是-90度。在旋转文本的每一列之前（即上方）有一个很大的空间。我想把它扔掉，但我试过的都不管用

有很多HTML和大量CSS，所以我把整个事情都搞砸了：

旋转文本的一行如下所示：

InvA

CSS看起来像：

body {font-family: Verdana, Arial, Helvetica, sans-serif;}
table {text-align: center; vertical-align: middle;}
table.uprog {border: 1px solid gray; border-collapse: collapse;  table-layout: fixed;}
table.uprog th {vertical-align: top;  border-right: 1px solid gray;}
.uprog td {text-align: center; vertical-align: middle; border: 1px solid gray; }
.uprog td.mal {text-align: left; vertical-align: middle;}
.uprog th {text-align: center; font-weight: bold;}
.vertical-text {
    font-size: 80%;
    display: inline-block;
    overflow: hidden;
    width: 1.2em;
    line-height: 4em;
}
.vertical-text-inner {
    white-space: nowrap;
    transform:  rotate(90deg);
}

我知道垂直文本位于TD中，

vertical align:middle将其更改为
top
没有任何区别

在Chrome中，旋转根本不起作用，因为我没有加入必要的webkit内容。小提琴在FF和IE中确实起作用（除了我想去掉的额外空间）。我没有足够的声誉来发布多个链接；借用的CSS作为一个注释在小提琴中是值得称赞的。
经过大量的混乱之后，我意识到，尽管文本是旋转的，但根据CSS框模型，DIV本身的顶部、左侧等方向与往常一样。因此，DIV上的负上边距将向上移动旋转的文本。
垂直对齐：中间对齐对齐DIV形成的整个框

CSS现在看起来像这样：

.vertical-text {
    font-size: 80%;
    display: inline-block;
    overflow: visible;
    width: 1.2em;
    line-height: 4.4em;
    margin-top: -1.3em;   /* THIS is what fixed it! */
    white-space: nowrap;
    transform:  rotate(90deg);
    -webkit-transform:  rotate(90deg);
}

我能够摆脱内部，
。垂直文本内部
。由于我还没有弄明白的原因，我不得不将溢出更改为可见

我没有改变小提琴，以防有人有更优雅的解决方案。您可以在此处看到它们的原生栖息地发生上述变化的结果：http://ksuweb.kennesaw.edu/faculty/rbrow211/tlc/docs.html#uprogtable“>。
也许您正在寻找：

transform-origin: top-left;