使用CSS转换旋转表头文本

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

.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/

我使用动态图像作为解决方法,虽然这也存在问题.我很高兴作为一个后备,但似乎应该有一种方法来使这个CSS工作 - 它几乎就在那里.

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

'transform'改变你声明它的整个元素的方向,而不是它内部的文本内容.它更像IE的'矩阵'属性,而不是'写模式'.

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

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

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

可以在XHTML文档中使用内联SVG(我只测试过Safari和Firefox):

  
    

        

            
 
            

                
            
            

                
            
            

                
            
        
        

            
Example row header
            
1
            
2
            
3
        
    
  

不幸的是,您必须明确设置表格单元格的宽度和高度以及使用SVG渲染的文本的平移.此外,文件扩展名必须是xhtml.

Webkit增加了:

-webkit-writing-mode:vertical-rl;

你可以申请哪一个div.

当我回答类似问题时,我使用David Votrubec的jQuery插件和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 = $('
', { height: width, width: height })
, newInnerDiv = $('
', { 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);

这位于页面顶部:

这在你的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都具有"垂直"类.

这是一个在jsFiddle中运行的演示.

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