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

我在标题中有一个旋转文字的表格。 我从其他地方借了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);
}

我知道垂直文本是在一个TD vertical-align: middle; 将其更改为top并没有什么区别。

Chrome中的旋转根本不起作用，因为我没有放入必要的-webkit内容。 小提琴在FF和IE中工作（除了我想摆脱的额外空间）。 我没有足够的声望发布多个链接; 作为对小提琴的评论，借用的CSS有一定的功劳。

---

根据CSS盒模型的说法，在经历了大量混乱之后，我意识到，虽然文本是旋转的，但DIV本身的顶部，左侧等方向就像往常一样。 因此，DIV上的负顶边将向上移动旋转的文本。 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">http://ksuweb.kennesaw.edu/faculty/ rbrow211 / TLC / docs.html＃uprogtable。

链接地址: http://www.djcxy.com/p/81751.html

上一篇: Margins / Padding on Rotated Text in Table Cells

下一篇: OpenGL rotation behaves weird between 90 and 270 degrees