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

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

如果您的案例中有另一个您不想轮播的内容 - 更新帖子,那么我们可以尝试找到更好的解决方案.

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

Answer 2

我使用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都具有"垂直"类.

这是一个在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

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

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