表格使用transform: rotate(-90deg)显示异常，如何修正？

嘿，这个旋转表格的坑我踩过好几次！用transform: rotate(-90deg)后出现显示不符预期的情况，大多是因为旋转后的位置偏移和容器尺寸适配没做好，下面给你几个实用的解决方案：

1. 调整变换原点 + 平移修正位置 #

默认的transform-origin是元素中心（50% 50%），旋转后表格会围绕中心偏移，我们可以通过修改原点配合平移拉回正确位置：

table {
  /* 将旋转原点设为表格右上角，让旋转的锚点更可控 */
  transform-origin: top right;
  /* 先旋转-90度，再向左平移整个表格的高度（旋转后高度等价于原表格宽度） */
  transform: rotate(-90deg) translateX(-100%);
}

如果需要表格居中显示，也可以配合绝对定位调整：

table {
  transform-origin: center;
  transform: rotate(-90deg) translate(-50%, 50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

2. 用容器包裹，适配旋转后的宽高 #

旋转后表格的宽高会互换（原宽度变高度，原高度变宽度），外层容器如果没适配这个变化，会导致显示错乱。用容器专门处理尺寸和定位：

<div class="table-container">
  <table>
    <!-- 你的表格内容 -->
  </table>
</div>

.table-container {
  /* 容器尺寸设为旋转后表格的实际大小：原表格高度→容器宽度，原表格宽度→容器高度 */
  width: 450px; /* 假设原表格高度是450px */
  height: 250px; /* 假设原表格宽度是250px */
  /* 可选：用flex让表格在容器内居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 防止旋转后内容溢出 */
}

.table-container table {
  transform: rotate(-90deg);
}

3. 调整变换顺序：先平移再旋转 #

CSS变换是从右到左执行的，有时候换个顺序能解决偏移问题——先把表格平移到目标位置，再旋转：

table {
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: top right;
}

这个顺序会先让表格向左移动自身宽度，再围绕右上角旋转，最终位置会更贴合预期。

核心逻辑是：旋转会改变元素的坐标系，但浏览器依然会按照旋转前的文档流位置预留空间，所以必须通过transform-origin和translate修正偏移，同时让容器适配旋转后的宽高比。

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