如何旋轉表格標題單元格並自動調整為內容大小？

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");

我希望這可以幫助你。