dir="rtl" 能翻转表格列顺序是因为HTML规范强制要求RTL模式下表格列布局镜像，第一列显示在最右边；必须作用于table或更高层HTML元素，CSS的direction属性无效。
直接加 dir="rtl" 到 <table> 或其父容器，表格列顺序就会自动从右往左翻转——这是最简单有效的做法，不需要改 CSS、不依赖 JS。
为什么 dir="rtl 能翻转表格列顺序
HTML 规范明确要求：当 dir="rtl" 生效时，表格的列布局必须镜像。也就是说，<colgroup> 和 <col> 的顺序、<tr> 内 <td> 的视觉排列，都会从右开始。这不是浏览器“猜”的，而是强制行为。
- 第一列（
<td>第一个）会显示在最右边，最后一列显示在最左边 -
colspan和rowspan逻辑不变，但起始位置按 RTL 重算 - 表头
<th>同样参与翻转，无需额外设置text-align - 注意：
direction: rtl这个 CSS 属性对表格列序无效，必须用 HTML 的dir属性
dir="rtl" 放在哪一层才真正生效
放在 <table> 标签上就足够，但更稳妥的做法是设在 <body> 或根 <html dir="rtl"> ——这样所有嵌套表格、表单控件、按钮图标等都同步适配，避免局部方向不一致。
- 只给某个
<table>加dir="rtl"：能翻转列，但可能和周围 LTR 文本混排错乱（比如表格右侧有段落文字） - 给
<div class="rtl-table-wrapper">加：无效——dir必须作用于表格本身或更高层块容器，不能靠 wrapper 的 CSS 隔离 - 用
[dir="rtl"] table这类选择器覆盖样式：多余，且无法触发列序翻转，纯属浪费
表格内文本对齐和边距别硬写 left/right
表格单元格里的文字对齐、内边距、外边距，如果还用 text-align: right、padding-left: 8px 这类物理属性，会在 RTL 下和列翻转产生冲突，导致内容“挤到角落”或留白错位。
立即学习“前端免费学习笔记（深入）”；
- 改用逻辑属性：
text-align: start自动对应 RTL 的右对齐，LTR 的左对齐 - 边距统一用
padding-inline-start、margin-block-end等，让浏览器自己映射方向 - 绝对定位的
left/right值完全不受dir影响，必须配合:dir(rtl)覆盖，例如：td .badge:dir(rtl) { right: 4px; left: auto; } - 避免在
<col>上写style="width: 200px; text-align: right"——<col>不渲染内容，text-align无效，且宽度定义会被 RTL 模式忽略
复杂表格（带固定列、滚动、合并单元格）的 RTL 注意点
当表格有横向滚动、position: sticky 表头、或大量 colspan/rowspan 时，RTL 下容易出现列错位、sticky 元素偏移、滚动条初始位置异常等问题。
- 横向滚动条默认停在最右端（符合 RTL 阅读习惯），但若 JS 强制
scrollLeft = 0，会导致首列不可见——应改用scrollTo({ inline: 'start' }) -
sticky表头需配合inset-inline-start替代left，否则在 RTL 下粘不住正确边缘 - 多层嵌套表格（如单元格里再放 table）必须每一层都显式声明
dir="rtl"，继承不会穿透<td>边界 - 用 JS 动态生成表格时，别在
innerHTML里拼接dir属性，而应在创建document.createElement('table')后立即设el.dir = 'rtl'，否则 Safari 可能漏触发列翻转
