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

Question

我有一个标题中带有旋转文本的表格。我从别处借用 CSS 并修改为旋转 90 度而不是 -90 度。在旋转文本的每一列之前(即)之前有一个很大的空间。我想摆脱它，但我尝试过的都不起作用。

有很多 HTML 和相当数量的 CSS，所以我把整个东西放在一个 fiddle 里: http://jsfiddle.net/SLkfR/ .

一行旋转后的文字如下所示: <td><div class="vertical-text"><div class="vertical-text-inner">InvA</div></div></td>

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 东西。 fiddle 在 FF 和 IE 中确实有效(除了我想去掉的额外空间)。我没有足够的声誉来发布多个链接； fiddle 中的注释是借用 CSS 的功劳。

Answer 1

也许您正在寻找:

transform-origin: top-left;