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

Question

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

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

 th { background-color: #ccc; } th, td { border: 1px solid #000; } .rotate { transform: rotate(-90deg); text-align: center; margin-bottom: 100px;/* <-- Anything I could do here? */ } 

 <table cellspacing="0" cellpadding="0"> <thead> <tr> <th class="rotate"> Foo </th> <th class="rotate"> Bar </th> </tr> </thead> <tbody> <tr> <td> Foo collection </td> <td> Bar collection </td> </tr> </tbody> </table> 

我在其他几个问题中找到了一些代码来解决我的问题，但是其中大多数问题都无法解决我遇到的问题：

只要给定表格单元格的内容增加（例如，更多的字符和/或单词），内容就会在给定单元格之外流动或破坏单元格的外观。

首先，我希望表格单元格停留在它们应该放置的位置（因此，不要像上面我的小提琴中那样，将鼠标悬停在其他单元格上）：

其次，我希望能够调整这些单元格中的文本，这意味着这些单元格必须能够调整大小而不会破坏表格的布局：

换句话说：我想创建旋转的表头单元，而不会丢失任何HTML的表默认功能。 是否可以在不破坏表的情况下旋转表标题单元格（ <th>元素）？

Answer 1

当您想更改文本的书写方向时，可以使用writing-mode 。 在这种情况下，我使用writing-mode: vertical-lr; ，它使文本垂直，并且容器高度将更改以适合文本。 我们还需要将文本旋转到适当的位置，但是将来我会使用sideways-lr ，该语言现在没有支持。

 th { background-color: #ccc; } th, td { border: 1px solid #000; } .rotate span { writing-mode: vertical-rl; transform: rotate(180deg); } 

 <table cellspacing="0" cellpadding="0"> <thead> <tr> <th class="rotate"> <span>Foo</span> </th> <th class="rotate"> <span>Foo Bar Bazz</span> </th> <th class="rotate"> <span>FooBar</span> </th> </tr> </thead> <tbody> <tr> <td> Foo collection </td> <td> Foo Bar Bazz collection </td> <td> Foo Bar collection </td> </tr> </tbody> </table> 

Answer 2

如果要动态更改它们，请创建一个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");

我希望这可以帮助你。