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

假设我有一个包含一些行和列的表，所以我想在单元格中旋转文本，如下所示
：

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

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

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

10公斤
B
C
D
E
20公斤
G
H
我
J
30公斤
L
M
N
O

css:

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

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

运输署{
边界塌陷：塌陷；
边框：1px黑色实心；
}
tr:n第（5）类td:n第（1）类{
可见性：隐藏；
}
#轮换{
-莫兹变换：旋转（-90.0度）；/*FF3.5+*/
-o变换：旋转（-90.0度）；/*Opera 10.5*/
-webkit变换：旋转（-90.0度）；/*Saf3.1+，镀铬*/
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=0.083）；/*IE6，IE7*/
-ms过滤器：“progid:DXImageTransform.Microsoft.BasicImage（旋转=0.083）”；/*IE8*/
}

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

另外，请确保将

id

#rotate

更改为类，因为您有多个类

$（文档）.ready（函数（）{
$（'.rotate'）.css（'height'，$（'.rotate'）.width（））；
});
td{
边界塌陷：塌陷；
边框：1px黑色实心；
}
tr:n第（5）类td:n第（1）类{
可见性：隐藏；
}
.轮换{
/*FF3.5+*/
-moz变换：旋转（-90.0度）；
/*歌剧10.5*/
-o变换：旋转（-90.0度）；
/*Saf3.1+，铬*/
-webkit变换：旋转（-90.0度）；
/*IE6，IE7*/
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=0.083）；
/*IE8*/
-ms过滤器：“progid:DXImageTransform.Microsoft.BasicImage（旋转=0.083）”；
/*标准*/
变换：旋转（-90.0度）；
}

10公斤
B
C
D
E
20公斤
G
H
我
J
30公斤
L
M
N
O
在将CSS旋转应用于内部元素方面，答案非常好。但是，可以通过一种方式来实现最终目标，不需要JavaScript，并且可以处理较长的文本字符串

通常，在第一个表列中包含垂直文本的全部原因是为了在短的水平空间中容纳一长行文本，并与高行内容（如您的示例所示）或多行内容（我将在本示例中使用）并排


通过在父TD标记上使用“.rotate”类，我们不仅可以旋转内部DIV，还可以在父TD标记上设置一些CSS属性，强制所有文本保持在一行上，并将宽度保持在1.5em。然后，我们可以在内部DIV上使用一些负的边距，以确保它很好地居中


td{
边框：1px黑色实心；
填充物：5px；
}
.轮换{
文本对齐：居中；
空白：nowrap；
垂直对齐：中间对齐；
宽度：1.5em；
}
.旋转div{
-莫兹变换：旋转（-90.0度）；/*FF3.5+*/
-o变换：旋转（-90.0度）；/*Opera 10.5*/
-webkit变换：旋转（-90.0度）；/*Saf3.1+，镀铬*/
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=0.083）；/*IE6，IE7*/
-ms过滤器：“progid:DXImageTransform.Microsoft.BasicImage（旋转=0.083）”；/*IE8*/
左边距：-10em；
右边距：-10em；
}

10公斤
B
C
D
E
G
H
我
J
L
M
N
O
Q
R
s
T
20公斤
B
C
D
E
G
H
我
J
L
M
N
O
Q
R
s
T
30公斤
B
C
D
E
G
H
我
J
L
M
N
O
Q
R
s
T
不幸的是，虽然我认为这些答案可能对我有用，但我仍在努力寻找解决方案，因为我使用的是响应表中的表，在响应表中可以使用overflow-x

因此，考虑到这一点，请以更简洁的方式查看此链接，它不会出现奇怪的宽度溢出问题。它最终对我有效，并且很容易实现

不计算高度。严格的CSS和HTML<代码>

仅适用于Chrome，因为Chrome无法更改

的文本方向

th
{
垂直对齐：底部对齐；
文本对齐：居中；
}
第四跨
{
-ms写入方式：tb-rl；
-webkit写作模式：垂直rl；
写入方式：垂直rl；
变换：旋转（180度）；
空白：nowrap；
}

将文本旋转90度。

@Mr_Green:transform:rotate（-90.0度）；我在代码中添加了它，但没有更改。我可以知道它是用来做什么的吗？注意，值0.083表示7.5度，对于IE10，您需要-ms transform:rotate（-90.0度）；这适用于短文本，但当输入较长文本时，

td

的宽度将增大，并且无法缩小：（+1）但适用于工作文本case@EduardLuca

max width

有帮助，例如在Chrome上测试的

max width:1em

，但单元格宽度只是较长文本介绍的问题之一。至少（1）我想到了分词和（2）定位/对齐。（1）可以使用非分词字符；（2）使用相对定位而不是文本对齐，特别是在表格/单元格有点静止的情况下。不过，旋转是有帮助的