<分区>
<分区>
我有一张 table ，我正在旋转第 th
这是代码
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;
}<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>这很好用，但是 th 是宽度，就好像文本没有旋转一样，这会导致它在较小的屏幕上中断。有什么方法可以设置宽度，使其仅与旋转后的文本一样宽？
最佳答案
获得所需输出的另一种方法是使用 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>关于html - 旋转文本的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48298561/
相关文章：
javascript - 使用 jQuery 时下一个和上一个无法正常工作
javascript - Durandal ko映射: mapped li not rendered in DOM
javascript - 使用 jQuery 获取包含数据的 HTML
javascript - 在 css 或 javascript 中重新定义 html <font size=1-7>
html - 如何在 Bootstrap 3 中添加 10 个相等的列
html - 使用 <object> 标签包含 HTML 内容 : allowed format of included file
html - 当我使用外部样式表时，Firefox SVG 图像被截断
jquery - Div 在点击时显示，但在使用 CSS 和 Jquery 第二次点击时不隐藏，不使用按钮，而是 <li> 标签中的类