Javascript 如何旋转表格标题单元格并自动调整内容大小？

我试图设计的桌子最终会有点动态。我希望表格标题单元格显示为旋转（以节省水平空间）。我知道可能有更好的方法来节省一些表空间，但当我在玩一些HTML时，我对一些似乎不可能的事情产生了兴趣

在下面的代码中，我尝试旋转单元格：

th{
背景色：#ccc；
}
th，
运输署{
边框：1px实心#000；
}
.轮换{
变换：旋转（-90度）；
文本对齐：居中；
边距底部：100px；/*如果要动态更改它们，请创建CSS类并添加：

.rotate-text {
    //for old browsers
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg) ;
    -o-transform: rotate(90deg) ;
    -ms-transform: rotate(90deg) ;
    //for all modern browsers
    transform: rotate(90deg);
}

现在使用jQuery检查单词数是否增加了目标，如果为true，则切换在TD或TH中创建的类

jQuery("th").toggleClass("rotate-text");

我希望这对您有所帮助。
当您想要更改文本的写入方向时，您可以使用
写入模式。
在这种情况下，我使用
写入模式：垂直lr；
，这会使文本垂直，容器高度将更改以适应文本。我们还需要在适当的位置旋转文本，但将来我将使用e> 横向lr

，现在缺乏支持

th{
背景色：#ccc；
}
th，
运输署{
边框：1px实心#000；
}
.旋转跨度{
写入方式：垂直rl；
变换：旋转（180度）；
}

福
福巴巴兹酒店
福巴
富收藏
富吧巴兹系列
富吧系列

但有一个问题：如果

表格标题包含多个单词，则单词的显示顺序不正确（由于

变换：旋转（180度）

）（例如，如果它包含单词“foo bar”，则显示为“bar foo”）。您知道我如何解决这个问题吗？这不是由旋转引起的。原因是

写入模式：垂直lr；

的渲染方式。您可以使用

垂直rl

更改方向（请参阅更新的答案）。