direction: rtl对表格无效，必须用dir="rtl"属性；它强制镜像列序、翻转表头与焦点流，而css仅影响文本对齐，不改变dom逻辑顺序。
table上直接加direction: rtl会打乱列顺序
这不是渲染错觉，而是CSS direction不参与表格结构重排。它只影响行内文本对齐和Unicode双向算法，但<th>、<code><td>的DOM顺序不变，视觉上却表现为“第一列跑到最右边”，导致表头与数据错位、排序逻辑混乱。
<p>常见现象：阿拉伯语表格里数字列显示异常、点击表头排序后列内容移位、导出Excel时顺序颠倒。</p>
<ul><li>绝对不要在<code><table>或<code><tr>上写<code>style="direction: rtl"
<table dir="rtl">中用<code>dir属性，而非CSS
dir="rtl"会正确翻转<colgroup></colgroup>顺序、<th>排列、Tab键焦点流，而<code>direction做不到
局部单元格文字方向要用dir，不是direction
比如某列要显示希伯来语姓名，另一列是英文ID——这时direction只能让文字右对齐，但光标进入输入框后仍从左往右跳，复制粘贴时括号和数字顺序错乱。
真正起效的是HTML dir属性，它触发Unicode双向算法，影响文本逻辑流：
-
<td dir="rtl">שלום עולם</td>→ 光标从右开始，选中文本按视觉顺序，括号自动翻转 -
<td dir="ltr">user_123</td>→ 即使父<table dir="rtl">，该单元格仍保持LTR逻辑 <li>避免用<code><span style="direction: rtl"></span>包裹文字，它不改变光标行为，也不影响剪贴板内容 -
<td><bdi>{{user_input}}</bdi></td>→ 自动检测首字符Unicode类别，独立决定方向 - 比
<span dir="auto"></span>更可靠，不依赖父元素dir继承 - IE已淘汰，现代浏览器全支持；若需兼容，退化为
<span dir="ltr"></span>并加服务端校验 <td style="writing-mode: vertical-rl; text-orientation: mixed">一月</td>-
vertical-rl让文字垂直、行从右向左，text-orientation: mixed保持数字和拉丁字母直立 - 避免用
transform: rotate(90deg)，它破坏文本选择、屏幕阅读器识别和打印样式 - 注意
line-height需用无单位值（如line-height: 1.5），否则竖排时行距计算失准
bdi标签适合动态插入的不确定方向文本
用户提交的评论、搜索关键词、API返回的姓名字段，可能混入阿拉伯语、波斯语或纯数字，方向不可预知。此时dir="auto"在Safari旧版和Android WebView中常失效，且不响应后续JS修改。
<bdi></bdi>是唯一能安全隔离Bidi污染的原生方案：
竖排中文表格必须用writing-mode，direction无效
想让表格文字从上到下、从右到左（传统中文竖排），direction: rtl完全不起作用——它只管水平流向，不改变文字块堆叠方向。
正确路径只有writing-mode：
direction是视觉对齐开关，dir才是文本逻辑流向的总闸门——尤其在表格这种结构敏感的场景里，漏掉这个区分，后面所有样式调试都是在补漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
