表格單元格內的IE中的垂直文本

我試圖在跨越幾行的薄表格單元格內旋轉一些文本跨瀏覽器。我希望它是行的一個很好的小結，這就是爲什麼它很薄並旋轉-90度。這裏所描述的提示：表格單元格內的IE中的垂直文本

工作就像一個魅力除，驚奇驚訝，IE，其中文本被旋轉，但文本被夾到所述單元格的寬度。

下面是相關的樣式：

#schedmenu td.label { 
/*width:22px;*/ 
/*width:100%*/ 
vertical-align:middle; 
font-size:12.5px; 
} 


#schedmenu td.label span { 
display:block; 
-moz-transform: rotate(-90deg); /* FF3.5+ */ 
    -o-transform: rotate(-90deg); /* Opera 10.5 */ 
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */ 
     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
       M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 
       M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */ 
      zoom: 1; 

color:white; 
position:relative; 
top:12px; 
}

和HTML：

<td class="label" rowspan="3"><span>Recent</span></td>

你將是我的英雄，如果你可以讓我過去，這一個:)

來源

2010-07-12 Karl Rosaen

你可以做一個演示？ – 2010-07-12 03:04:52

剛剛部署了一個演示：http://9-3-rotatehelp-rotatehelp.latest.realtimefarms.appspot.com/schedule – 2010-07-12 11:48:39

如果我是你，我會打開InkScape並創建三個不同的圖像。

或者因爲您已經有了printshreened圖像，只是裁剪它。並把它們作爲背景圖片。

我經常做一些非常漂亮的css設計，它可以在Chrome和Firefox中工作，然後打印屏幕，裁切它並用圖像替換實際的設計，並且它們都可以在IE中使用。

或span：顯示：block and height：100％; ??

來源

2010-07-12 07:21:22 iamgopal

是的，我會嘗試訴諸圖像背景，如果我找不到一種方法使它與文本一起工作。但我很親密！ – 2010-07-12 11:33:07

我可以看到你已經嘗試真正的努力，任何運氣與高度：100％; ？ – iamgopal 2010-07-12 17:11:04

不幸的是身高：100％ – 2010-07-12 17:19:20

不是最優雅的方式，但它的工作IE8下（沒有在舊版本試過）：

<td class="label" rowspan="3"><span>Recent<br/>&nbsp;</span></td>

來源

2010-07-12 09:05:28 Zsolti

這對我不起作用 – 2010-07-12 11:40:48

只是部署了一個演示，如果你想看到完整的HTML/CSS（請參閱我對該鏈接問題的評論） – 2010-07-12 11:49:51

我創建2 CSS，一個用於IE瀏覽器，一個用於瀏覽器的其餘部分。對於IE我用：

style="color:black; line-height:20px; writing-mode: tb-rl; filter: flipH() flipV();"

來源

2010-11-12 13:06:20 Raffi

我發現，雖然它似乎工作，它切斷就像你在原來的職位了。玩過幾個選項之後，我添加了「table-layout：fixed;」到桌子的CSS。這樣我可以強制所有列寬達到他們的要求，並且整個範圍都會顯示出來。

目前只在IE8中測試過，但我相信它應該跨瀏覽器工作，因爲我真正添加的唯一的東西是表格佈局，我相信它是完全被接受的？將其設置爲固定使得所有列都相同（忽略內容），除了已設置寬度的位置，所以您需要根據需要設置所有寬度。

無論如何只是一個想法。

我的相關CSS：

table.comp{ 
    table-layout: fixed; 
} 
th.vertth { 
    vertical-align:middle; 
    height: 125px; 
    width: 20px; 
    overflow: hidden; 
} 
th.vertth span { 
    -moz-transform: rotate(-90deg); /* FF3.5+ */ 
    -o-transform: rotate(-90deg); /* Opera 10.5 */ 
    -webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */ 
    zoom: 1; 
    position:relative; 
    display:block; 
    margin: 0; 
    width: 125px; 
}

注意跨度的寬度應該是相同的單元格的高度，以防止其溢出。如果你有更大的內容去跨度，考慮調整你的列高或寬度。

來源

2011-06-15 22:21:20

表格單元格內的IE中的垂直文本

回答

相關問題