如何将文本向左旋转90度，并根据html中的文本调整单元格大小

77

假设我的桌子上有一些行和列，所以我想旋转像这样的单元格中的文本
： 在此处输入图片说明

问题是当我使用样式旋转文本时：

#rotate {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

像这样全弄乱了

html代码：

<table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td id='rotate'>10kg</td>
        <td >B</td>
        <td >C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td id='rotate'>20kg</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td id='rotate'>30kg</td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>


</table>

CSS：

<style type="text/css">
td {
    border-collapse:collapse;
    border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
    visibility: hidden;
}
#rotate {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
</style>
css  html  html-table 
— 拉塔
source
@Mr_Green：转换：rotate（-90.0deg）；我已将其添加到我的代码中，但没有更改。我可以知道它的用途吗？
— lata 2013年
— Don Kirkby 2014年

Answers:

62

为此，您可以通过将旋转CSS应用于内部元素，然后调整元素的高度以使其宽度匹配，因为元素已经旋转以适合<td>。

另外，id #rotate由于有多个班级，因此请确保将您更改为班级。

一个4x3表格，第一列的标题旋转了90度

$(document).ready(function() {
  $('.rotate').css('height', $('.rotate').width());
});
td {
  border-collapse: collapse;
  border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
  visibility: hidden;
}
.rotate {
  /* FF3.5+ */
  -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  -webkit-transform: rotate(-90.0deg);
  /* IE6,IE7 */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* Standard */
  transform: rotate(-90.0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td>
      <div class='rotate'>10kg</div>
    </td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>
      <div class='rotate'>20kg</div>
    </td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
  </tr>
  <tr>
    <td>
      <div class='rotate'>30kg</div>
    </td>
    <td>L</td>
    <td>M</td>
    <td>N</td>
    <td>O</td>
  </tr>


</table>
展开摘要

的JavaScript

与纯JavaScript中的上述等效项如下：

jsFiddle

window.addEventListener('load', function () {
    var rotates = document.getElementsByClassName('rotate');
    for (var i = 0; i < rotates.length; i++) {
        rotates[i].style.height = rotates[i].offsetWidth + 'px';
    }
});
— 丹尼尔·伊姆斯
source
请注意，值0.083是针对7.5度的，对于IE10，您将需要-ms-transform：rotation（-90.0deg）;
— 大卫·赛克斯
13
这适用于短文本，但是当输入较长的文本时，td宽度会增加，并且无法缩小它：（+ 1对于工作案例而言
— Eduard Luca 2014年
@EduardLucamax-width可以帮助max-width: 1em在Chrome上进行测试，例如，但是单元格宽度只是较长的文字介绍的问题之一。至少要想到（1）断字和（2）定位/对齐。（1）可以帮助使用不间断的字符，（2）可以使用相对位置而不是文本对齐的esp。如果表/单元格是静态的。尽管如此，旋转远非理想之举，但在有限的情况下很有用。
— 加里·凯纳嫩（JariKeinänen）2015年
6
现在，尝试使列变大，并使文本居中-放大-布局在您的脸上爆炸！即使在2015年，您仍然必须通过为垂直文本编写通用图像处理程序来做到这一点……这很荒谬。这不应该那么难。它应该像<span style =“ text-direction：up-down-down; font-weight：粗体; font-size：10px;”一样容易。> lalala </ span>，并非出于愚蠢的原因。
— Stefan Steiger，2015年
第一个单元格是正方形。不是你想要的。
— 鲍里斯·加富罗夫
50

不计算高度。严格的CSS和HTML。<span/>仅适用于Chrome浏览器，因为Chrome无法更改的文本方向<th/>。

th 
{
  vertical-align: bottom;
  text-align: center;
}

th span 
{
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
<table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table>
展开摘要

— 18C
source
3
这非常狡猾并且非常强大。好主意，应该被接受-没有JS，没有特殊的宽度，高度，边距等技巧。-很好。
— 安德鲁·霍奇金森
为了获得更好的效果，您可以额外使用th span{display:table; border-spacin:0; margin-left:...}以避免IE11，Firefox和Chrome之间的显示差异。
— 18C 18年
正是我在寻找什么，它会根据内容自动调整表格标题的高度，而无需任何额外的JavaScript！在我的用例中效果很好。
— stvn9v
2
看起来sideways-lr不需要180度旋转hack，但目前只有Firefox支持它。
— mpen
42

在将CSS旋转应用于内部元素方面，Daniel Imms的回答非常出色。但是，可以通过不需要JavaScript并使用更长的字符串的方式来实现最终目标。

通常，在第一个表格列中使用垂直文本的全部原因是要在较短的水平空间中放置一长行文本，并与高行内容（如您的示例）或多行内容并排（我将在此示例中使用）。

在此处输入图片说明

通过在父TD标签上使用“ .rotate”类，我们不仅可以旋转内部DIV，还可以在父TD标签上设置一些CSS属性，以强制所有文本停留在一行上，保持宽度为1.5em。然后，我们可以在内部DIV上使用一些负边距，以确保其居中对齐。

td {
    border: 1px black solid;
    padding: 5px;
}
.rotate {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;
}
.rotate div {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
         margin-left: -10em;
         margin-right: -10em;
}
<table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td class='rotate' rowspan="4"><div>10 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>
    
    <tr>
        <td class='rotate' rowspan="4"><div>20 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>
    
    <tr>
        <td class='rotate' rowspan="4"><div>30 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>
    
</table>
展开摘要

此解决方案要记住的一件事是，如果行（或跨行）的高度比第一列中的垂直文本短，那么它将不能很好地工作。如果您跨越多行，或者您有很多内容创建高行，则效果最佳。

在jsFiddle上玩这个很有趣。

— 丰富的设计
source
请注意：为了安全起见，我将margin-left和的margin-right值从调高-10em到-100em。如果未旋转的文本宽度超过20em，布局将开始改变。OTOH，200em文本宽度太大，无法旋转-90度来阅读，因此应该足够避免遇到此问题。
— maxathousand
^^我的上面的修正在我的桌子下面造成了过多的空白，这是因为页边距扩展得很宽（旋转后“高”）。为了解决这个问题，我添加overflow: hidden了rotated td。
— maxathousand
1
不适用于IE11。您还应该添加'transform'和'-ms-transform'–
— Anonymoose
2

不幸的是，尽管我认为这些答案可能对我有用，但我在解决方案方面仍在苦苦挣扎，因为我在响应表中使用表（在其中使用了溢出-x）。

因此，请牢记这一点，以一种更简洁的方式查看此链接，该方式不会出现奇怪的宽度溢出问题。最后，它对我有用，并且非常容易实现。

https://css-tricks.com/rotated-table-column-headers/

— vr_driver
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.