CSS 在 HTML 表格标题单元格内垂直旋转文本

Vertically rotate text inside an HTML table header cell

提问by user882196

I am using the following css to rotate the text inside table header cells but the header cells is of the same width as if the text were horizontal.How can I just rotate the text and the width will reduce automatically..

我正在使用以下 css 旋转表格标题单元格内的文本，但标题单元格的宽度与文本水平相同。我怎么能只旋转文本，宽度会自动减小..

    table#MyTable tr th a{
    color: #FFFFFF;
    display: block;
    /*Firefox*/
    -moz-transform: rotate(-90deg);
    /*Safari*/
    -webkit-transform: rotate(-90deg);
    /*Opera*/
    -o-transform: rotate(-90deg);
    /*IE*/
    writing-mode: tb-rl;
    filter: flipv fliph;
    padding: 60px 1px;
}

回答by kizu

If you need to adjust just the width of the cells and they contain only one line of text each you can do this: http://jsfiddle.net/sSP8W/3/— set widthof an element to it's line-height.

如果您只需要调整单元格的宽度并且每个单元格只包含一行文本，您可以这样做：http: //jsfiddle.net/sSP8W/3/— 将width元素设置为line-height.

The problem with CSS3-transforms is that they work like as CSS' position: relative: their original box stays the same, so rotating, skewing etc. don't cause the changes in the element's dimensions. So: there is really no perfect CSS solution, you can use JS to adjust the dimensions, or try to find hackety workarounds. So if you have only links in a table, you can do something like that: http://jsfiddle.net/sSP8W/4/— rotating the table itself.

CSS3-transforms 的问题在于它们像 CSS' 一样工作position: relative：它们的原始框保持不变，因此旋转、倾斜等不会导致元素尺寸的变化。所以：确实没有完美的 CSS 解决方案，您可以使用 JS 调整尺寸，或者尝试寻找 hackety 解决方法。因此，如果表格中只有链接，则可以执行以下操作：http: //jsfiddle.net/sSP8W/4/— 旋转表格本身。

If your case have another content that you don't want to rotate — update the post, so we could try to find a better solution.

如果您的案例有其他您不想轮换的内容 - 更新帖子，以便我们尝试找到更好的解决方案。

upd:Just found out a solution to the rotated text in tables: using some magic with vertical paddings we could make cells stretch to the content, so look at this almost final example: http://dabblet.com/gist/4072362

upd：刚刚找到了表格中旋转文本的解决方案：使用一些带有垂直填充的魔法，我们可以使单元格拉伸到内容，所以看看这个几乎是最后一个例子：http: //dabblet.com/gist/4072362

回答by Jobj?rn Folkesson

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.

这是在 jsFiddle 中运行的演示。

Hope it helps someone, even though I'm a year late!

希望它可以帮助某人，即使我迟到了一年！

回答by Tyler Rasmussen

In IE and Chrome (Blink and Webkit), you can put the text in a child with a vertical writing mode rather than using a transform. Saves you all the CSS and JavaScript tricks. Chrome has a minor display bug at the moment (Chrome 37), but it's been reported.

在 IE 和 Chrome（Blink 和 Webkit）中，您可以使用垂直书写模式而不是使用变换将文本放在子级中。为您节省所有 CSS 和 JavaScript 技巧。Chrome 目前有一个小的显示错误（Chrome 37），但已报告。

.vertical { 
    -webkit-writing-mode:vertical-rl; 
    -ms-writing-mode:tb-rl; 
    writing-mode:vertical-rl; 
 }

 <td><span class="vertical">This text should be vertical.</span></td>

I recommend using white-space:nowrapon the vertical text within the table.

我建议white-space:nowrap在表格中的垂直文本上使用。

回答by Samuel Minter

The solution by jobjornabove now breaks in Chrome, because it supports writing-mode as of early 2016, so essentially tries to rotate the text twice, and ends up with mispositioned horizontal text. From my understanding, Firefox and Safari will probably support this soon too, which will cause them to break too. After some banging my head against the wall, I fixed it by changing the CSS to:

上面jobjorn的解决方案现在在 Chrome 中崩溃了，因为它在 2016 年初支持写作模式，所以基本上尝试将文本旋转两次，最终导致错误定位的水平文本。据我了解，Firefox 和 Safari 可能很快也会支持这一点，这也会导致它们崩溃。在我的头撞墙之后，我通过将 CSS 更改为以下内容来修复它：

@supports not (writing-mode:vertical-rl) {
    table div.rotated {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        white-space: nowrap;
    }
}

@supports (writing-mode:vertical-rl) {
    table div.rotated {
        writing-mode:vertical-rl;
        -webkit-transform: rotate(180deg) translate(8px,0px);
        -moz-transform: rotate(180deg) translate(8px,0px);
        white-space: nowrap;
    }
}

The 8 pixel translation was what it took for the alignment to look right in my particular example. You mileage may vary. The 180 degree rotation was to make the top of the text face left instead of right. If you don't need that, you can probably skip the transforms in the second part.

在我的特定示例中，8 像素平移是对齐看起来正确所需要的。您的里程可能会有所不同。180 度旋转是使文本的顶部朝左而不是朝右。如果您不需要它，您可以跳过第二部分中的转换。

In the JavaScript, you also need to make sure that you don't move the origin for those last transforms, as that was only needed if you were using a transform to do the vertical orientation itself, so I wrapped that part in a conditional:

在 JavaScript 中，您还需要确保不要移动最后一次转换的原点，因为只有在使用转换来执行垂直方向本身时才需要这样做，因此我将该部分包装在条件中：

var supportsWM = CSS.supports('writing-mode', 'vertical-rl');
if (!supportsWM) {
    newInnerDiv.css('-webkit-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
    newInnerDiv.css('-moz-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
}

回答by Eric

Mods: sorry that this post "responds to an answer". But I don't have the karma necessary to comment on it. Catch-22.

Mods：对不起，这篇文章“回应了一个答案”。但我没有必要的业力来评论它。第 22 条军规。

The code in @jobjorn's answer and fiddl depends on cell width to calculate header height, which leads to erroneous heights when any cell is wide. This modified fiddle uses the header text width instead: http://jsfiddle.net/marvmartian/76z82/

@jobjorn's answer 和 fiddl 中的代码取决于单元格宽度来计算标题高度，当任何单元格很宽时，这会导致错误的高度。这个修改后的小提琴使用标题文本宽度代替：http: //jsfiddle.net/marvmtian/76z82/

    cellsToRotate.each(function () {
        var cell = $(this);
        var s = '<div id="killme" style="position:absolute; top:-10000px; left:-10000px;"><span id="string_span" style="font-weight: bold; font-size: 1em">'+
            cell.text()+'</span></div>';
        $(window).append(s);
        var width = $('#string_span').width();
        var newText = cell.text()
            , height = cell.height()
            //, width = cell.width()
            , newDiv = $('<div>', {  height: width,  width: height })
            , newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

回答by Purag

Get rid of padding:60px 1px;(unless you need it for some other reason...but that's what's causing the problem).

摆脱padding:60px 1px;（除非您出于其他原因需要它......但这就是导致问题的原因）。

Example: http://jsfiddle.net/purmou/sSP8W/

示例：http: //jsfiddle.net/purmou/sSP8W/