IE表格单元格中的垂直文本

I'm trying to rotate some text cross browser within a thin table cell that spans a few rows. I want it to be a nice compact summary of the rows, which is why it is thin and rotated -90 degrees. The tips described here:

我正在尝试在跨越几行的瘦表格单元格中旋转一些文本跨浏览器。我希望它是一个很好的紧凑的行总结,这就是为什么它很薄并旋转-90度。这里描述的提示:

Vertical (rotated) text in HTML table

HTML表格中的垂直(旋转)文本

work like a charm except in, surprise surprise, IE, where the text is rotated, but the text is clipped to the width of the cell.

工作就像一个魅力,除了惊喜,IE,文本旋转,但文本被剪裁到单元格的宽度。

Here are the relevant styles:

以下是相关款式:

#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;
}

and the html:

和HTML:

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

You will be my hero if you can get me past this one :)

如果你能让我超越这一个,你将成为我的英雄:)

4 个解决方案

#1

I created 2 CSS, one for IE and one for the rest of the browsers. For IE I used:

我创建了2个CSS,一个用于IE,另一个用于其他浏览器。对于我使用的IE:

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

#2

If I were you, I would have open InkScape and created three different image.

如果我是你,我会打开InkScape并创建三个不同的图像。

or as you already have printscreened images, just crop it. and put them as background image.

或者你已经有了printcreened图像,只需裁剪它。并把它们作为背景图像。

I frequently do some extremely beautiful css design which works in chrome and firefox and then print screen it , crop it and replace the actual design with images and it all works in IE.

我经常做一些非常漂亮的css设计,它在chrome和firefox中工作,然后打印它,裁剪它并用图像替换实际设计,它都适用于IE浏览器。

or span: dispaly:block and height:100%; ??

或跨度:显示:块和高度:100%; ??

#3

I found that whilst it seemed to work, it cut off like you had in your original post. After playing with a few options, I added "table-layout: fixed;" to the table's css. That way I could force all my column widths to their required and the entire span would show up.

我发现虽然它似乎工作,但它像你原来的帖子一样切断了。在玩了几个选项之后,我添加了“table-layout:fixed;”到表的css。这样我就可以将所有列宽强制到所需的范围,并显示整个范围。

Only tested in IE8 at the moment, but I believe it should work cross-browser, since the only thing I really added was the table-layout, which I believe is fully accepted? Setting it to fixed makes all columns equal (ignoring content) except where widths have been set, so you need to set all your widths where required.

目前仅在IE8中进行了测试,但我相信它应该可以跨浏览器工作,因为我真正添加的唯一内容是表格布局,我相信这是完全被接受的?将其设置为fixed会使所有列相等(忽略内容),除非已设置宽度,因此您需要在需要的位置设置所有宽度。

Just a thought anyway.

无论如何只是一个想法。

My related CSS:

我的相关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;
}

Note that the width of the span should be the same as the height of the cell to prevent it from spilling out. If you have larger content to go in the span, consider resizing your column height or width.

请注意,跨度的宽度应与单元格的高度相同,以防止其溢出。如果要在范围内放入更大的内容,请考虑调整列高或宽度。

#4

Not the most elegant way, but it works under IE8 (didn't tried under older versions):

不是最优雅的方式,但它在IE8下运行(在旧版本下没试过):

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

#1