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

- user882196

Answer 1

如果你只需要调整单行文字的表格单元格的宽度，可以这样做：http://jsfiddle.net/sSP8W/3/ — 将元素的 width 设置为其 line-height。

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

如果您的情况包含其他您不想旋转的内容，请更新发布文章，这样我们可以尝试寻找更好的解决方案。 更新： 刚刚发现了一个解决表格中旋转文本的方法：通过一些魔法垂直填充，我们可以使单元格根据内容拉伸，所以请参阅这个几乎最终的示例：http://dabblet.com/gist/4072362。

- kizu

---

非常好用！只有一个问题，为了让它在Chrome上工作，你仍需要添加“-webkit-transform”和“-webkit-transform-origin”。 - ced-b

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都具有类“vertical”。

这里是在jsFiddle中运行的演示demo。

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

- Jobjörn Folkesson

---

谢谢！虽然有一年的延迟，但现在正是我正在寻找的！ - Dan Twining

我忘记提到你需要的CSS，但我想你已经自己解决了。 - Jobjörn Folkesson

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。

- Tyler Rasmussen

---

根据 https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#Browser_compatibility，这在 Firefox 36 中得到支持。 - wolfyuk

Answer 4

上面的jobjorn提出的解决方案现在在Chrome中已经失效，因为自2016年初起Chrome支持writing-mode属性，所以本质上尝试将文本旋转两次，并最终导致水平文本位置错误。据我了解，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');
}

- Samuel Minter

---

答案没有固定的顺序，因此如果您引用另一个答案，应直接链接到它（使用答案下方的“分享”链接）。 - Jeffrey Bosboom

Answer 5

Mods：很抱歉这篇帖子是“回答回答”的。但我没有足够的karma在其上进行评论。陷入了困境。

@jobjorn答案和fiddl中的代码依赖于单元格宽度来计算标题高度，这会导致当任何单元格变宽时出现错误的高度。这个修改过的fiddle使用标题文本宽度代替：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' });

- Eric

Answer 6

现在可以实现此功能，而无需使用其他答案中使用的特定于浏览器的转换。请注意，从2022年开始，需要包装span以使火狐浏览器特别将旋转的文本居中于列中（webkit默认情况下会执行此操作）。

<style type="text/css">
  #myTable td {
    text-align: right;
  }
  
  th.r span {
    transform: rotate(185deg);
    writing-mode: vertical-lr;
  }
</style>

<table id="myTable" border="1" cellpadding="2" style="border-collapse:collapse;">
  <tr>
    <th class='r'><span>Display</span></th>
    <th class='r'><span>Year made (TV?)</span></th>
    <th class='r'><span>Native Res</span></th>
  </tr>
  <tr>
    <td style="color:rgb(17, 85, 204);">Dell U2410 (game) </td>
    <td>2010</td>
    <td>1080p</td>
  </tr>
  <tr>
    <td style="color:rgb(17, 85, 204);">Dell U2410 (sRGB)</td>
    <td>2010</td>
    <td>1080p</td>
  </tr>
  <tr>
    <td style="color:rgb(17, 85, 204);"> Sony 40VL130 (game)</td>
    <td style="color:rgb(0, 0, 255);">2008</td>
    <td>1080p</td>
  </tr>
</table>

- Al Ro

Answer 7

去掉 padding:60px 1px; （除非你有其他原因需要它...但这就是问题的根源）。

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

- Purag

---

这是问题的链接：http://jsfiddle.net/sSP8W/2/。除非在“th”上设置固定的“height”，否则它不太可能被解决。或者使用JavaScript。 - thirtydot

抱歉，我无法将其转化为 Fiddle。 - user882196

Answer 8

<style type="text/css">
  #myTable td {
    text-align: right;
  }
  
  th.r span {
    transform: rotate(185deg);
    writing-mode: vertical-lr;
  }
</style>

<table id="myTable" border="1" cellpadding="2" style="border-collapse:collapse;">
  <tr>
    <th class='r'><span>Display</span></th>
    <th class='r'><span>Year made (TV?)</span></th>
    <th class='r'><span>Native Res</span></th>
  </tr>
  <tr>
    <td style="color:rgb(17, 85, 204);">Dell U2410 (game) </td>
    <td>2010</td>
    <td>1080p</td>
  </tr>
  <tr>
    <td style="color:rgb(17, 85, 204);">Dell U2410 (sRGB)</td>
    <td>2010</td>
    <td>1080p</td>
  </tr>
  <tr>
    <td style="color:rgb(17, 85, 204);"> Sony 40VL130 (game)</td>
    <td style="color:rgb(0, 0, 255);">2008</td>
    <td>1080p</td>
  </tr>
</table>

- Srawan