Html 如何在表格列标题处垂直旋转文本

我在我的网页上用过这个。这是我放置代码的链接。我想，第一个数字第二个数字列应该垂直旋转。我已经做到了。但是，问题是制作后，列标题和列不能保持在一起。除此之外，我希望垂直旋转文本的列将尽可能薄。但是，尽管我在该列的标题处设置了20px的宽度，我还是做不到。另一件事是，在IE8，旋转文本的div看起来不同（填充/边距问题）。根据我的问题，我应该只写我的问题/旋转文本的失败。但是，我在这里写了很多问题。这是因为，我所有的问题都是在将旋转文本放在列标题后出现的（我给定的插件的js也有一点责任，因为它会阻止正确修改列的宽度）。我相信，如果我能以正确的方式放置垂直旋转的文本（也涉及IE8）并正确修改表格的宽度，就不会再有问题了。那么，如何将垂直旋转文本正确放置在列标题处

一些代码：

等级
用户插入的标题名
第一个数第二个数
第一个数第二个数
第一个数第二个数
第一个数第二个数
第一个数第二个数
第一个数第二个数
第一个数第二个数
第一个数第二个数
第一个数第二个数
第一个数第二个数
1.
系统架构师和分析器
1.
4.
6.
20
5.
1.
4.
6.
20
5.
2.
会计
4.
13
7.
11
8.
1.
4.
6.
20
5.
3.
初级技术作者
5.
26
9
3.
19
1.
4.
6.
20
5.

仅旋转div，而不是表格标题。每一行

th

应如下所示：

first Number Second Number

并将旋转css代码调整为：

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

---

是最新的小提琴

谢谢，看起来很棒！除此之外，您能告诉我为什么不能修改表列的宽度吗？这里是小提琴：我希望垂直文本将在两行和他们的列将尽可能薄。我已经把这些列的宽度设为20像素。但是，它不起作用！在

.rotate

的底部有一个

宽度：150px

，它将文本设置为加宽，这个宽度帮助我将文本分成两行。如果我不给它，文本将放置3或4行。但是，我需要两行。这就是为什么，我给出了宽度：150px，它实际上是垂直文本的高度。我猜，你不明白我的评论。现在，我试着让它变得简单。我想，列的宽度将是20px，用户插入的标题名称列的宽度将是120px。但是，无论css应用了什么宽度，宽度都保持不变！如果更改“旋转”底部的宽度，则宽度将更改。我理解你的评论。如果你不想改变，我会尝试另一种方法。应该是你要找的。另一层

div

带有

溢出：可见

，允许它在不挤压的情况下显示全文。