css - 如何在 TH 表格标签中使用 CSS Rotate()

Question

我需要一些 CSS 大师的帮助。

我正在尝试创建一个简单的 html <table>其中列标题(<th> 标签)的文本旋转 270 度以横向显示。

我无法锚定标题单元格，因此单元格文本的最左侧部分单独对齐所有 <th> 的底部或基线标签。

我对此做了很多很多尝试，但无法通过 CSS 解决。

谁能给我一些关于如何实现这一目标的想法？

在 http://jsfiddle.net/franco13/t5GgE/ 查看我的 jsfiddle

这是我想要实现的:

Answer 1

http://jsfiddle.net/t5GgE/1/

为标题指定点 (65, 60) 的转换原点，不允许换行，并使您的 td 居中对齐。

th.rotate {
    white-space: nowrap;
    -webkit-transform-origin: 65px 60px;
    -moz-transform-origin: 65px 60px;
    -o-transform-origin: 65px 60px;
    -ms-transform-origin: 65px 60px;
    transform-origin: 65px 60px;
}

td.rights {
    text-align: center;
}

---

IE8及以下更新

对于 IE8 及以下版本，您必须使用 Transformation matrices而不是 rotate(270deg)。 因此，对应的 270 度旋转矩阵是 [0, 1, -1, 0]。

您需要做的是添加以下内容，并且应该适用于 IE8 及以下版本:

th.rotate span {
    /* rotated text in IE renders very bad (unless you use clear type), so that even by making it normal, looks less bold but still bold */
    font-weight: normal\9; /* \9 is an hack for IE8 and below */
    letter-spacing: 3px\9; /* because is so bold, need to give letters some space to breath */

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod = "auto expand");
    width: 150px\9;
    height: 150px\9;
    margin-right: -130px\9;
}

Final jsFiddle version

IE9 问题和解决方法 在 IE9 中，您会在标题部分看到一个黑色的大矩形，出现此错误的原因是 IE9 可以识别 -ms-transform 和 filter。当两个 CSS 都存在时，浏览器只会呈现一个黑色区域。要解决此问题，我建议您对 IE9 使用条件包含以仅使用 -ms-transform。