Question

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

像魅力一样工作，除了惊喜，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>

如果你能让我超越这个，你将成为我的英雄：）

Answer 1

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

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

Answer 2

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

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

我经常做一些非常漂亮的css设计，它在chrome和firefox中工作，然后打印它，裁剪它并用图像替换实际设计，它都可以在IE中使用。

或span：dispaly：block and height：100％; ??

Answer 3

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

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

无论如何只是一个想法。

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

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

Answer 4

不是最优雅的方式，但它在IE8下运行（在旧版本下未尝试过）：

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

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

4 个答案: