表格列顺序翻转必须用 dir="rtl" 属性而非 style="direction: rtl"，否则导致表头错位、排序异常、导出错乱；需配合 lang 属性、逻辑 css 属性及 bdi 隔离混合文本。
表格列顺序翻转必须用 dir="rtl"，不是 direction: rtl
直接给 <table> 加 <code>style="direction: rtl" 会打乱列序，但不是 CSS 渲染错觉——它让 <th> 和 <code><td> 的 DOM 顺序不变，视觉上却把第一列推到最右边，导致表头与数据错位、排序后列内容移位、导出 Excel 顺序颠倒。HTML 规范明确要求：只有 <code>dir="rtl" 属性才能触发表格列布局的强制镜像，包括 <colgroup></colgroup> 顺序、colspan 起始位置重算。
实操建议：
- 绝对不要在
<table> 或 <code><tr> 上写 <code>style="direction: rtl" - 整表 RTL 布局，直接写
<table dir="rtl">；若需全局适配，应设在 <code>，而非局部容器 - 动态切换时，用
document.querySelector('table').setAttribute('dir', 'rtl')，别用style.direction = 'rtl' -
下，<select></select>下拉箭头仍在左侧，<input type="number">的增减按钮方向未翻转 - 复制表格里的阿拉伯语数字（如
٢٠٢٦）变成6202，或混合内容如v2.4.1显示为1.4.2v - Safari 中双击选词反向、NVDA 不播报连字规则
- 所有不可预知方向的动态文本（API 返回、用户输入），一律用
<bdi></bdi>包裹：<td><bdi>v2.4.1</bdi></td> - 已知固定 LTR 字符串（如
iOS 18），可用dir="ltr"，但<bdi></bdi>更鲁棒，无需手动判断 - 不要用
direction: ltr替代 —— 它不触发 UBA，复制结果仍是乱序 <th> 和 <code><td> 内部的 <code><bdi></bdi>会独立计算方向，不影响表格结构表格相关 CSS 必须用逻辑属性，物理属性会失效
写了
dir="rtl"后，margin-left: 16px还是往左推，视觉上变成右侧留白；text-align: right强制右对齐，但违背语义（应为text-align: end）；float: left在 RTL 表格里反而卡住列顺序。关键替换清单：
- 边距/内边距：
margin-left→margin-inline-start，padding-right→padding-inline-end - 定位：
left: 0→inset-inline-start: 0（Safari ≤15.3 需降级：[dir="rtl"] .cell { right: 0; }） - 文本对齐：
text-align: right→text-align: end，text-align: left→text-align: start - Flex/Grid 表格替代方案（如用
display: grid模拟表头冻结）：用justify-content: start，别硬写row-reverse，否则叠加dir="rtl"会双重反转
逻辑属性生效前提是父级有明确方向上下文——如果只在
<td> 上写 <code>margin-inline-start，但外层没dir或direction，它就等价于margin-left，不会自动映射。- 边距/内边距：
dir="rtl" 必须设在
只给 <table> 单独加 <code>dir="rtl"，看似列翻转了，但点击表头排序后光标跳错、<input type="search"> 的清除按钮没右置、屏幕阅读器读不出阿拉伯语音调——因为浏览器只在根元素带 dir 时才完整启用 RTL 行为，包括焦点流、选中逻辑、滚动条位置和表单控件自动适配。
常见错误现象：
正确做法是：，且 lang 必须同步设置，否则字体连字不生效、东阿拉伯数字（١٢٣）显示为西方格式（123）。
表格内混合内容必须用 <bdi></bdi> 隔离 LTR 片段
阿拉伯语表格里夹着英文版本号、URL、电话号码（如 +965 2222 3333），仅靠 dir="rtl" 无法阻止 Unicode 双向算法（UBA）错误重排——这不是 CSS 能修的，而是 HTML 语义缺失问题。现象是复制出来顺序混乱、括号方向翻转、数字显示断裂。
实操要点：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
