旋转文本的宽度

Question

我有一张桌子，我可以旋转th 这是代码

＆＃13;

＆＃13;

table.results-table span {
  display:block;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  font-weight:300;
}

＆＃13;

<table class="results-table">
  <tr>
    <th></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

这样可以正常工作，但th的宽度就像文本没有被旋转一样，导致它在较小的屏幕上中断。有没有办法设置宽度，使其仅与旋转的文本一样宽？

Answer 1

为什么不将rotate转换为<th>而不是<span>

Stack Snippet

＆＃13;

＆＃13;

table.results-table th {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  font-weight:300;
}
th,td{padding:10px;text-align:center;}
body{font:13px Verdana;}

＆＃13;

<table class="results-table">
  <tr>
    <th></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

获得所需输出的另一种方法是使用writing-mode属性：

table.results-table span {
  writing-mode: sideways-lr;
}

table.results-table span {
  writing-mode: sideways-lr;
}

<table class="results-table">
  <tr>
    <th></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
</table>