Question

我的标题中有一个带旋转文字的表格。我从其他地方借了CSS并修改了90度而不是-90度。在每列旋转文本之前（即）之前有一个宽阔的空间。我想摆脱它，而我没有尝试过任何工作。

有很多HTML和相当数量的CSS，所以我把整件事放在一个小提琴中： 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);
}

我知道垂直文字位于带有vertical-align: middle;的道明中。将其更改为top并没有任何区别。

旋转在Chrome中根本不起作用，因为我还没有投入必要的-webkit内容。在FF和IE中，小提琴确实有效（除了我想要摆脱的额外空间）。我没有足够的声誉来发布多个链接;借用CSS作为小提琴中的评论是有用的。

Answer 1

在经历了大量的混乱之后，我意识到，虽然文本是旋转的，但DIV本身的顶部，左侧等都是一如既往的朝向，根据CSS盒子模型。因此，DIV上的负上边距会使旋转的文本向上移动。 table-data标签的vertical-align: middle;对齐由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);
}

我能够摆脱内心的.vertical-text-inner。由于我还没想到的原因，我不得不将溢出改为可见。

如果有人有更优雅的解决方案，我还没有改变这个小提琴。你可以在这里看到上述变化的结果：http：//ksuweb.kennesaw.edu/faculty/rbrow211/tlc/docs.html#uprogtable"＆gt; {{{}}}。 >

Answer 2

也许您正在寻找：

transform-origin: top-left;

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

2 个答案: