Question

看起来应该可以使用以下内容：

.verticalText 
{           
    /* IE-only DX filter */
    writing-mode: tb-rl;
    filter: flipv fliph;

    /* Safari/Chrome function */
    -webkit-transform: rotate(270deg);

    /* works in latest FX builds */
    -moz-transform: rotate(270deg);
}

这适用于IE。

在Safari，Chrome和FX中以奇怪的方式出错 - 在文本旋转之前，计算单元格的大小！

以下是演示：http://jsfiddle.net/HSKws/

我正在使用动态图片作为解决方法，尽管also has its problems。我很高兴作为一个后备，但似乎应该有一种方法来使这个CSS工作 - 它几乎就在那里。

任何人都知道在应用变换后让单元格适合内容的方法吗？

Answer 1

'transform'会改变您声明它的整个元素的方向，而不是其中的文本内容。它更像IE的'矩阵'属性，而不是'写模式'。

至关重要的是，转换元素不会改变其内容大小的计算方式（或其父级布局如何受该大小影响）。用于垂直和水平尺寸调整的CSS算法是不同的，并且很难以正确使用;没有真正一致的方式，他们可以容纳任意轮换的内容。所以'transform'就像使用'position：relative'：它会改变内容的呈现位置，但与布局大小没有任何关系。

因此，如果要在表格中包含一个，则需要明确设置单元格的“高度”以适应预期的旋转“宽度”。如果您事先不知道，可能会使用JavaScript来破解它。

FWIW：对于我来说，在Fx3.1b3上，跨度也像其他一样旋转。但是在Windows上只有水平反锯齿（ClearType），渲染看起来不太好......渲染良好的图像可能会更好。

Answer 2

可以在XHTML文档中使用内联SVG（我只测试了Safari和Firefox）：

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <table border="1">
        <tr>
            <td>&#160;</td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
        </tr>
        <tr>
            <td>Example row header</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
  </body>
</html>

不幸的是，您必须明确设置表格单元格的宽度和高度以及使用SVG渲染的文本的翻译。此外，文件扩展名必须为xhtml。

Answer 3

Webkit已添加：

-webkit-writing-mode:vertical-rl;

您可以将其应用于div。

Answer 4

当我在a similar question上回答时，我使用a jQuery plugin by David Votrubec解决了这个问题，Mike在博客文章下面发表了评论。

将它放在.js文件中：

(function ($) {
  $.fn.rotateTableCellContent = function (options) {
  /*
Version 1.0
7/2011
Written by David Votrubec (davidjs.com) and
Michal Tehnik (@Mictech) for ST-Software.com
*/

var cssClass = ((options) ? options.className : false) || "vertical";

var cellsToRotate = $('.' + cssClass, this);

var betterCells = [];
cellsToRotate.each(function () {
var cell = $(this)
, newText = cell.text()
, height = cell.height()
, width = cell.width()
, newDiv = $('<div>', { height: width, width: height })
, newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

newInnerDiv.css('-webkit-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
newInnerDiv.css('-moz-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
newDiv.append(newInnerDiv);

betterCells.push(newDiv);
});

cellsToRotate.each(function (i) {
$(this).html(betterCells[i]);
});
};
})(jQuery);

这位于页面顶部：

<script src="rotatetablecellcontent.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.yourtableclass').rotateTableCellContent();
    });
</script>

这在你的CSS中：

/* Styles for rotateTableCellContent plugin*/
table div.rotated {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode:tb-rl;
    white-space: nowrap;
}

thead th {
    vertical-align: top;
}

table .vertical {
    white-space: nowrap;
}

然后确保您的表具有“yourtableclass”类，并且您想要旋转的所有TD都具有“垂直”类。

这是a demo running in a jsFiddle。

希望它对某人有所帮助，即使我迟到了两年！

Answer 5

为了在表格标题中旋转文字：

将标题内容放在div中 - 旋转这些div而不是标题本身
在表格标题th上设置位置：relative，在旋转的div上设置position：absolute。
设置th标题的高度

完成。

你可以在这里看到：

enter image description here

如果你让你的窗口变瘦 - 小于1000像素并且它会旋转表格标题，你可以在这个页面上看到 - http://www.rugbydata.com/

这是我使用的代码：

div.rotatabletext {
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
width:0px;
text-align:left;
height:0px;
margin-left:0px;
margin-top:0px;
bottom:2px;
position:absolute;
}
table.tournamentresults > * > tr > td {
padding:1px;
}
table.tournamentresults > thead > tr:nth-child(1) > th:nth-child(1) {
height:70px;
position:relative;
}
table.tournamentresults > thead > tr:nth-child(2) th {
height:70px;
position:relative;
}

Answer 6

这个工具为我做了所有的想法......

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

使用CSS转换旋转表头文本

6 个答案: