如何在TH Table中使用CSS旋转（）标签

我需要一些CSS专家的帮助。如何在TH Table中使用CSS旋转（）标签

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

我在锚定标题单元格时遇到问题，因此单元格文本的最左侧部分单独对齐所有<th>标记的底部或基线。

我已经做了很多很多尝试，并且无法通过CSS解决它。

任何人都可以给我一些想法如何实现这一目标？

见我在http://jsfiddle.net/franco13/t5GgE/

的jsfiddle这是我想达到的目标：

enter image description here

来源

2013-02-21 H. Ferrence

[垂直旋转HTML表格标题单元格内的文本]（http://stackoverflow.com/questions/7076052/vertically-rotate-text-inside-an-html-table-header-cell）。 – Vucko 2013-02-21 12:57:51

是的，我明白这一点。但它不起作用。你能偷看我的jsfiddle @Vucko吗？ – 2013-02-21 12:59:37

@ H.Ferrence检查我更新的答案以支持IE。 – 2013-02-22 11:33:55

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)。所以，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。

来源

2013-02-21 13:07:34

table { 
    margin-bottom: 20px; border: solid 1px red 
    } 
    tr#groups { 
    /*display:block; 
    margin-left:120px; 
    margin-top:120px;*/ 
    } 

    th.rotate { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    transform: rotate(270deg); 
    /*display:inline-block;*/ 
    height:30em; 
    /*float:left;*/ 
    /*width:30px;*/ 
    } 
    span.intact { 
     display: block; 
     white-space:nowrap; 
    text-align:right 
    } 
    td.menuItems { 
    width: 240px; 
    } 
    td.no-indent { 
    font-weight: bold; 
    } 
    td.indent { 
    padding-left:12px; 
    } 
    td.rights { 
    width:20px; 
    } 
    td,th { border: solid 1px red}

我知道这是最后也没有，但是我把th.rotate高度和改变跨度显示：块，nowrap和右对齐... 我相信你会完成此; o）

来源

2013-02-21 13:05:32 Mike

如何在TH Table中使用CSS旋转（）标签

回答

相关问题