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

我需要一些CSS大师帮助.

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

我无法锚定标题单元格,因此单元格文本的最左侧部分单独对齐所有第一个单元格的底部或基线.标签.

我已经做了很多次尝试,并且无法通过CSS解决它.

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

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

这就是我想要实现的目标：

解决方法

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而不是旋转(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;
}

Final jsFiddle version

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

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

解决方法

猜你在找的CSS相关文章