如何在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矩阵代替rotate(270deg).因此,270deg的对应旋转矩阵是[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;
}

最终的jsFiddle版本

IE9问题和解决方法 在IE9中,你会在标题部分看到一个大的黑色矩形,这个错误的原因是IE9识别-ms-transform和filter.当两个CSS都存在时,浏览器只是呈现黑色区域​​.为了解决这个问题,我认为你只使用IE9的条件包含-ms-transform.