使用 CSS 转换旋转表格标题文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/716970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotating table header text with CSS transforms
提问by Keith
This looks like it should be possible with the following:
这看起来应该可以通过以下方式实现：
.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);
}
This works in IE.
这在 IE 中有效。
It goes wrong in a bizarre way in Safari, Chrome and FX - the cell's size is calculated beforethe text is rotated!
它在 Safari、Chrome 和 FX 中以一种奇怪的方式出错 - 在旋转文本之前计算单元格的大小！
Here is a demo: http://jsfiddle.net/HSKws/
这是一个演示：http: //jsfiddle.net/HSKws/
I'm using dynamic images as a workaround, although that also has its problems. I'm happy with that as a fall-back, but it seems like there should be a way to make this CSS work - it's almost there.
我使用动态图像作为一种解决方法，尽管这也有其问题。我很高兴将其作为后备，但似乎应该有一种方法可以使此 CSS 工作 - 几乎就在那里。
Anyone know a way to make the cells fit the content after the transform has been applied?
有人知道在应用转换后使单元格适合内容的方法吗？
采纳答案by bobince
‘transform' alters the orientation of the entire element you declare it on, not the text content inside it. It's more like IE's ‘matrix' property than ‘writing-mode'.
'transform' 会改变你声明它的整个元素的方向，而不是其中的文本内容。它更像是 IE 的“矩阵”属性而不是“写作模式”。
Crucially, transforming an element doesn't change how its content size is calculated (or how its parent's layout is affected by that size). CSS's algorithms for vertical and horizontal sizing are different and difficult enough to get right to being with; there's no real consistent way they could accomodate content with arbitrary rotation. So ‘transform' is like using ‘position: relative': it changes where the content is rendered, but not anything to do with layout size.
至关重要的是，转换元素不会改变其内容大小的计算方式（或其父元素的布局如何受该大小影响）。CSS 用于垂直和水平大小调整的算法是不同的，并且很难适应；他们没有真正一致的方式可以通过任意旋转来容纳内容。所以“转换”就像使用“位置：相对”：它改变了内容的呈现位置，但与布局大小无关。
So if you want to include one in a table you'll need to set the cell's ‘height' explicitly to accomodate the expected rotated ‘width'. If you don't know that in advance you could potentially hack it up with JavaScript, perhaps.
因此，如果您想在表格中包含一个，您需要明确设置单元格的“高度”以适应预期的旋转“宽度”。如果你事先不知道，你可能会用 JavaScript 破解它，也许。
FWIW: for me on Fx3.1b3 the span is also rotated like the others. However on Windows with its horizontal-only anti-aliasing (ClearType) the rendering doesn't look great... a well-rendered image could come out considerably better.
FWIW：对我来说，在 Fx3.1b3 上，跨度也像其他人一样旋转。然而，在 Windows 上，它的仅水平抗锯齿 (ClearType) 渲染看起来不太好……渲染良好的图像可能会好得多。
回答by otto.poellath
It's possible using inline SVG in a XHTML document (I only tested Safari and Firefox):
可以在 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>
Unfortunately, you do have to explicitly set the width and height of your table cells and the translation of the text rendered using SVG. Also, the file extension must be xhtml.
不幸的是，您必须明确设置表格单元格的宽度和高度以及使用 SVG 呈现的文本的翻译。此外，文件扩展名必须是xhtml.
回答by Stephen Denne
Webkit has added:
Webkit 增加了：
-webkit-writing-mode:vertical-rl;
Which you can apply to a div.
您可以将其应用于div.
回答by Jobj?rn Folkesson
As I answered on a similar question, I solved it this using a jQuery plugin by David Votrubecand the comment by Mike below the blog post.
正如我在一个类似的问题上回答的那样，我使用David Votrubec 的 jQuery 插件和 Mike 在博客文章下方的评论解决了这个问题。
Put this in a .js-file:
把它放在一个 .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);
And this at the top of your page:
这在您的页面顶部：
<script src="rotatetablecellcontent.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.yourtableclass').rotateTableCellContent();
});
</script>
And this in your CSS:
这在你的 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;
}
Then make sure your table has the class "yourtableclass", and that all the TDs you want rotated have the class "vertical".
然后确保您的表具有“yourtableclass”类，并且您想要旋转的所有 TD 都具有“垂直”类。
Here's a demo running in a jsFiddle.
Hope it helps someone, even though I'm two years late!
希望它可以帮助某人，即使我迟到了两年！
回答by Dave Hilditch
In order to have rotated text inside your table headers:
为了在表格标题中旋转文本：
- Place the header content inside divs - rotate these divs rather than the header itself
- Set the position:relative on the table headers
th, position:absolute on the rotated divs. - Set height of
thheaders too
- 将标题内容放在 div 中 - 旋转这些 div 而不是标题本身
- 在表头上设置 position:relative
th，在旋转的 div 上设置 position:absolute 。 - 也设置
th标题的高度
Done.
完毕。
You can see it here:
你可以在这里看到它：
Which you can see on this page if you make your window skinny - less than 1000 pixels and it rotates the table headers - http://www.rugbydata.com/
如果您使窗口变窄，您可以在此页面上看到 - 小于 1000 像素并旋转表格标题 - http://www.rugbydata.com/
Here's the code I used:
这是我使用的代码：
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;
}
回答by doublejosh
This tool did all the thinking for me...
这个工具为我做了所有的思考......
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
