如何让旋转表头在LTR与RTL布局下均正确显示？RTL布局显示异常

我之前处理过类似的RTL布局问题，你遇到的情况是因为从右到左的布局会改变元素的默认对齐逻辑和布局流，而原来的垂直表头旋转样式没做适配，才导致显示错位。咱们一步步调整就能解决：

先看你的核心问题代码 #

你的HTML设置了dir="rtl"，但垂直表头的CSS是基于LTR（从左到右）写的，RTL下元素宽度的参考方向、对齐方式都变了，自然会出问题。原核心CSS片段：

.cellVerticalHeading p {
  white-space: nowrap;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  display: inline-block;
  line-height: 5.2;
}
.cellVerticalHeading p:before {
  content: '';
  width: 0;
  padding-top: 110%; /* takes width as reference, + 10% for faking some extra padding */
  display: inline-block;
}

解决方案：给RTL布局加专属适配 #

我们需要固定旋转原点，同时针对RTL布局单独调整样式，确保旋转后的表头位置一致：

替换你原来的.cellVerticalHeading相关CSS，用下面的代码：

.cellVerticalHeading {
  text-align: center; /* 让容器内元素居中，不受LTR/RTL影响 */
}
.cellVerticalHeading p {
  white-space: nowrap;
  /* 固定旋转原点，避免RTL下旋转基准偏移 */
  transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  -o-transform-origin: bottom center;
  /* 保持旋转角度 */
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  display: inline-block;
  line-height: 1; /* 重置行高，用margin控制间距更灵活 */
  margin: 0;
}
.cellVerticalHeading p:before {
  content: '';
  width: 0;
  padding-top: 100%; /* 基于元素宽度的正方形比例，RTL下也能正确计算 */
  display: inline-block;
  vertical-align: bottom; /* 确保伪元素和文本对齐 */
}

/* RTL布局专属适配 */
[dir="rtl"] .cellVerticalHeading p {
  /* 微调旋转后的位置，根据实际显示效果调整 */
  margin: 0 auto;
  /* 如果有偏移，可加translate修正：transform: rotate(90deg) translateX(-5px); */
}

/* 可选：RTL下微调伪元素的padding比例 */
[dir="rtl"] .cellVerticalHeading p:before {
  padding-top: 105%;
}

调整说明 #

1. 固定旋转原点：设置transform-origin: bottom center，让旋转始终从元素底部中心开始，不会因为RTL布局改变旋转基准，避免表头偏移。
2. 统一容器对齐：给.cellVerticalHeading加text-align: center，确保LTR和RTL下元素都居中，不会因为布局方向偏左/偏右。
3. RTL专属样式：用[dir="rtl"]选择器单独适配RTL布局，比如微调伪元素的比例、给旋转元素加位移修正，适配RTL的布局流。
4. 重置行高：原来的line-height:5.2在RTL下容易导致间距异常，重置后用margin控制更可控。

替换后不管HTML设置dir="ltr"还是dir="rtl"，垂直旋转的表头都能正常显示了。

内容来源于stack exchange