Question

我使用以下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;
}

Answer 1

如果您只需要调整单元格的宽度并且它们只包含一行文本，则可以执行以下操作：http://jsfiddle.net/sSP8W/3/ - 将元素的width设置为line-height

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

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

upd：刚刚找到了表格中旋转文本的解决方案：使用一些带有垂直填充的魔法，我们可以让单元格延伸到内容，所以请看几乎最后的例子：{{3 }}

Answer 2

我使用a jQuery plugin by David Votrubec和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都具有“垂直”类。

这是demo running in a jsFiddle。

希望它对某人有所帮助，即使我迟到了一年！

Answer 3

在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>

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

Answer 4

上面的solution by 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;
    }
}

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

在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');
}

Answer 5

Mods：抱歉这篇文章“回答了答案”。但我没有必要的业力来评论它。捉住22。

@ jobjorn的答案和fiddl中的代码取决于单元格宽度来计算标题高度，当任何单元格宽时，这会导致错误的高度。这个修改过的小提琴使用标题文字宽度代替：http://jsfiddle.net/marvmartian/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' });

Answer 6

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

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

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

6 个答案: