能否实现表格列旋转？CSS表头旋转后的内容查看方案求助

方案1：悬浮提示+优化旋转布局 #

不用改动现有表格结构，给旋转的表头单元格加原生title属性，鼠标悬浮时自动显示完整文本。同时调整CSS压缩列宽，避免空间浪费。

示例代码：

.table th {
  /* 保留你的旋转样式 */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  padding: 10px 5px; /* 缩小左右内边距，压缩列宽 */
}

<table class="table">
  <thead>
    <tr>
      <th title="月度用户活跃度统计">月活</th>
      <th title="付费用户转化率">付费转化</th>
    </tr>
  </thead>
  <!-- 表格内容 -->
</table>

优点：零JS依赖，实现简单，响应式友好，小屏幕也能通过悬浮查看完整文本。

方案2：点击展开/收起完整文本 #

给表头单元格嵌套可切换的文本容器，点击时让文本从旋转状态切换为横向显示，自动撑开或固定宽度展示完整内容，配合过渡动画更流畅。

示例代码：

.table th {
  position: relative;
  cursor: pointer;
  padding: 10px;
}
.table th .rotated-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: all 0.3s;
}
.table th.expanded .rotated-text {
  writing-mode: horizontal-tb;
  transform: rotate(0);
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 5px;
  border: 1px solid #eee;
  z-index: 10;
  white-space: nowrap;
}

// 简单切换逻辑
document.querySelectorAll('.table th').forEach(th => {
  th.addEventListener('click', () => {
    th.classList.toggle('expanded');
  });
});

<table class="table">
  <thead>
    <tr>
      <th><span class="rotated-text">月度用户活跃度统计</span></th>
      <th><span class="rotated-text">付费用户转化率</span></th>
    </tr>
  </thead>
</table>

优点：主动触发查看，不占用常规布局空间，响应式下可通过媒体查询调整展开逻辑（比如移动端默认展开）。

方案3：横向滚动的窄列表格 #

把表格放在带横向滚动的容器里，保持旋转表头的窄列设计，用户在小屏幕上可左右滚动查看完整表格，同时保证旋转文本的完整内容不被截断（通过设置足够的表头高度容纳文本）。

示例代码：

.table-container {
  overflow-x: auto;
  max-width: 100%;
}
.table th {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  width: 40px; /* 固定窄列宽度 */
  height: 120px; /* 足够容纳完整文本的高度 */
}

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th>月度用户活跃度统计</th>
        <th>付费用户转化率</th>
      </tr>
    </thead>
    <!-- 表格内容 -->
  </table>
</div>

优点：完全保留旋转表头的视觉设计，适配所有屏幕尺寸，用户通过滚动即可查看完整表格和表头文本。

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