如何在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旋轉（）標籤

回答

相關問題