使用CSS转换旋转表头文本
Kei*_*ith 35 css cross-browser
看起来应该可以使用以下内容:
.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工作 - 它几乎就在那里.
任何人都知道在应用变换后让单元格适合内容的方法吗？
bob*_*nce 18
'transform'改变你声明它的整个元素的方向,而不是它内部的文本内容.它更像IE的'矩阵'属性,而不是'写模式'.
至关重要的是,转换元素不会改变其内容大小的计算方式(或其父级布局如何受该大小的影响).用于垂直和水平尺寸调整的CSS算法是不同的,并且很难以正确使用; 没有真正一致的方式,他们可以容纳任意轮换的内容.所以'transform'就像使用'position:relative':它会改变内容的呈现位置,但与布局大小无关.
因此,如果要在表格中包含一个,则需要明确设置单元格的"高度"以适应预期的旋转"宽度".如果您事先不知道,可能会使用JavaScript来破解它.
FWIW:对于我来说,在Fx3.1b3上,跨度也像其他一样旋转.然而,在具有仅水平抗锯齿(ClearType)的Windows上,渲染看起来并不好......渲染良好的图像可能会更好.
可以在XHTML文档中使用内联SVG(我只测试过Safari和Firefox):
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="1">
<tr>
<td> </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.
当我回答类似问题时,我使用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 = $('<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都具有"垂直"类.
希望它对某人有所帮助,即使我迟到了两年!