代码之家 › 专栏 › 技术社区 › Keith

使用CSS转换旋转表标题文本

cross-browser css

Keith · 技术社区 · 16 年前

这似乎可以通过以下方式实现:

.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中,它以一种奇怪的方式出现了错误——计算了电池的大小。之前文本被旋转!

screenshot of bug

这是一个演示: http://jsfiddle.net/HSKws/

我正在使用动态图像作为解决方案,尽管 also has its problems . 我很高兴这是一个倒退,但似乎有一个办法,使这个CSS工作-它几乎在那里。

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

6 回复 | 直到 11 年前

bobince 16 年前

__transform__秷可更改声明它的整个元素的方向,而不是其中的文本内容。它更像是IE的__matrix_trade属性,而不是_写入模式_trade。

至关重要的是,转换元素不会改变其内容大小的计算方式(或者父元素的布局如何受该大小的影响)。CSS的垂直和水平大小调整算法是不同的,并且很难正确使用;它们没有真正一致的方式来适应任意旋转的内容。所以转换就像使用位置:相对:它改变内容呈现的位置,但与布局大小无关。

因此,如果要在表格中包含一个单元格,则需要显式设置单元格的__height_,以适应预期的旋转__width_。如果你事先不知道这一点,也许你可以用javascript来破解它。

fwiw:对于fx3.1b3上的我来说,跨距也像其他跨距一样旋转。但是,在只有水平消除混叠(ClearType)的Windows上,渲染看起来不太好…渲染良好的图像可以得到更好的效果。

otto.poellath 15 年前

可以在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 .

Stephen Denne 13 年前

WebKit已添加:

-webkit-writing-mode:vertical-rl;

你可以应用于 div .

Community CDub 8 年前

当我回答的时候 a similar question ,我用 a jQuery plugin by David Votrubec 还有迈克在博客下面的评论。

把它放在.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;
}

然后确保您的表具有类“your table class”,并且您要旋转的所有TDS都具有类“vertical”。

这里是 a demo running in a jsFiddle .

希望它能帮助别人,即使我晚了两年!

Dave Hilditch 11 年前

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

将标题内容放在分隔符内-旋转这些分隔符而不是标题本身
设置位置:相对于表标题 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;
}

doublejosh 14 年前

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

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