旋转表格th文本后的宽度适配问题：如何设置为旋转后文本宽度

这个问题我之前做报表的时候也踩过坑！旋转后浏览器还是会默认按文本原本的水平宽度计算的尺寸，小屏幕上很容易挤爆布局。下面给你几个实用的解决思路：

方法1：用writing-mode替代transform（最推荐） #

直接改变文字的排版方向，让浏览器自动计算正确的宽度，比rotate更靠谱：

table.results-table th span {
  writing-mode: vertical-rl; /* 垂直排版 */
  transform: rotate(180deg); /* 让文字从上到下阅读，和rotate(-90deg)效果一致 */
  white-space: nowrap;
  font-weight: 300;
}

/* 可选：给表格加固定布局，让整体更稳定 */
table.results-table {
  table-layout: fixed;
  width: 100%;
}

原理：writing-mode会让元素的排版方向变成垂直，浏览器会自动把的宽度适配成文字的垂直高度，完全不需要手动计算，小屏幕适配也更友好。

方法2：手动固定宽度（适合文本长度统一的场景） #

如果所有表头文本长度差不多，可以直接给设置固定宽度，同时让旋转的span占满整个单元格：

table.results-table th {
  width: 35px; /* 根据你旋转后文本的高度调整，比如"Test1"旋转后高度大概30-35px */
  padding: 0;
  text-align: center;
}

table.results-table th span {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  font-weight: 300;
  width: 100%;
  height: 80px; /* 这个高度对应<th>的默认行高，保证文字能完整显示 */
}

这种方法简单直接，适合表头文本长度一致的表格，比如统一的测试项名称。

方法3：JS动态计算宽度（适配文本长度不一的情况） #

如果表头文本长度参差不齐，可以用JS获取每个span的原始宽度（旋转后就是高度），再把这个值设为对应的宽度：

// 页面加载完成后执行计算
document.addEventListener('DOMContentLoaded', function() {
  const headerSpans = document.querySelectorAll('.results-table th span');
  
  headerSpans.forEach(span => {
    const parentTh = span.parentElement;
    // 原始文本的宽度 = 旋转后的高度，直接赋值给<th>的宽度
    parentTh.style.width = `${span.offsetWidth}px`;
  });
});

配合你的原有CSS，再加上white-space: nowrap防止文本换行：

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

额外小技巧：小屏幕横向滚动 #

如果表格列数太多，小屏幕还是容易崩，可以给表格套一个容器，开启横向滚动：

.table-wrapper {
  overflow-x: auto;
  max-width: 100%;
}

<div class="table-wrapper">
  <table class="results-table">
    <!-- 表格内容 -->
  </table>
</div>

内容的提问来源于stack exchange，提问作者MariaL