使用 CSS 转换旋转表格标题文本答案

【问题标题】：Rotating table header text with CSS transforms使用 CSS 转换旋转表格标题文本
【发布时间】：2010-10-17 13:09:15
【问题描述】：

这看起来应该可以通过以下方式实现：

.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 工作 - 它几乎就在那里。

有人知道在应用转换后使单元格适合内容的方法吗？

【问题讨论】：

在 FF3 中，标题没有旋转（您的测试页面设置正确吗？“垂直”类没有 CSS 样式”，但这可能是因为 CSS 对FF3)
道歉 - 可以看到标记中设置的样式，它们只是没有出现在 Firebug 的右侧 CSS 窗格中
在 FF3 中不起作用，因为根据开发人员文档，直到 FF3.5 才支持它。 developer.mozilla.org/En/CSS/-moz-transform
是的，对不起。我在代码 cmets 中提到过，但不清楚。 FX 仅在最新的预览版本中支持 CSS 转换。

标签： css cross-browser

【解决方案1】：

‘transform’改变你声明它的整个元素的方向，而不是它里面的文本内容。它更像是 IE 的“矩阵”属性，而不是“写作模式”。

至关重要的是，转换一个元素不会改变其内容大小的计算方式（或者其父级布局如何受该大小影响）。 CSS 的垂直和水平尺寸算法是不同的，而且很难适应；没有真正一致的方式可以容纳任意旋转的内容。所以“转换”就像使用“位置：相对”：它改变了内容的呈现位置，但与布局大小无关。

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

FWIW：对我来说，在 Fx3.1b3 上，跨度也像其他人一样旋转。然而，在具有仅水平抗锯齿 (ClearType) 的 Windows 上，渲染看起来并不好……渲染良好的图像可能会更好。

【讨论】：

【解决方案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。

【讨论】：

谢谢，我会调查的。它看起来很优雅:)
这是个好主意。我也可以使用 Javascript Canvas。然而，在这两种情况下，我都需要明确设置单元格的宽度和高度——如果我能做到这一点，CSS 转换也可以工作。我的问题是我不知道这些单元格中文本的确切大小；我需要它们拉伸以适应内容。
@AH：你需要设置一个文档类型。在 IE9 中工作，刚刚测试过；）但在 IE8 中不起作用-

【解决方案3】：

Webkit 已添加：

-webkit-writing-mode:vertical-rl;

您可以申请div。

【讨论】：

【解决方案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 都具有“vertical”类。

这里是a demo running in a jsFiddle。

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

【讨论】：

这个解决方案非常适合我。在当前的 FF 和 IE9 中（至少）。

【解决方案5】：

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

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

完成。

你可以在这里看到它：

如果您使窗口变窄（小于 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;
}

【讨论】：

你也可以添加 ... white-space: nowrap; ...帮助处理多个单词

【解决方案6】：

这个工具为我做了所有的思考......

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

【讨论】：