direction:rtl对表格列序无反转作用，仅影响文本方向和行内元素顺序；实现rtl表格需配合table-layout:fixed、text-align:right及手动调整html中th/td顺序。
direction:rtl 对表格单元格内容的影响有限
direction:rtl 本身只控制文本的**书写方向**和**行内元素的排列顺序**，不是“让整个表格倒过来显示”的开关。它不会翻转 <tr> 的顺序，也不会把第一列变成最右边一列。常见误解是加了 <code>direction:rtl 就能自动实现“从右向左布局的表格”，结果发现表头还是左对齐、列顺序没变——这是因为表格结构（<table>、<code><th>、<code><td>）本身有独立的布局逻辑，不受 <code>direction 直接重排。
真正起作用的是 table-layout 和 text-align 的组合
要在视觉上实现“从右向左排列的表格列”，核心是让列按 RTL 语义重新分配位置，而不是仅靠 direction。关键操作如下：
-
direction:rtl必须作用在<table> 元素上（不是 <code>或父容器），否则<th>/<code><td> 内部的文本方向可能不一致 <li>配合 <code>table-layout:fixed—— 否则浏览器用自动布局（auto），列宽由内容决定，RTL 下列顺序仍可能“看起来没变” -
text-align:right加在<th> 和 <code><td> 上，确保单元格内文本右对齐（尤其对数字、阿拉伯文等 RTL 文本很重要） <li>如果希望第一列出现在最右边（即列顺序镜像），必须手动调换 HTML 中 <code><th> 和 <code><td> 的书写顺序 —— CSS 无法反转 DOM 顺序 <p>示例片段：</p> <pre class="brush:php;toolbar:false;"></pre> <table style="direction:rtl; table-layout:fixed; width:100%;"> <thead><tr> <th style="text-align:right;">年龄</th> <th style="text-align:right;">姓名</th> <th style="text-align:right;">ID</th> </tr></thead> <tbody><tr> <td style="text-align:right;">28</td> <td style="text-align:right;">阿里</td> <td style="text-align:right;">001</td> </tr></tbody> </table> <p>注意：上面三列在 HTML 中写的是「年龄、姓名、ID」，渲染后会从右到左显示为「ID｜姓名｜年龄」——前提是它们宽度总和 ≤ 表格宽度，且用了 <code>table-layout:fixed。容易踩的坑：border-collapse 和 th/td 默认样式
很多表格用了
border-collapse:collapse，但 RTL 下边框可能错位，尤其当列宽计算异常时。更隐蔽的问题是：<th> 默认 <code>text-align:center，<td> 默认 <code>text-align:left，加了direction:rtl后若不显式设text-align:right，中文或数字会左对齐，破坏 RTL 视觉一致性。- 务必重置
th, td { text-align:right; }，不要依赖继承 -
border-collapse:collapse在 RTL + fixed layout 下偶尔导致最右列边框消失，可临时加border-right:1px solid #ccc强制渲染 - 避免对
<table> 设置 <code>dir="rtl"同时又在外层容器用direction:ltr—— 方向嵌套易引发不可预测的对齐行为需要镜像列顺序？只能改 HTML 结构
CSS 没有
flex-direction:row-reverse那样的表格列反转能力。如果你的需求是“把原来左起第一列变成右起第一列”，direction:rtl只有在table-layout:fixed且列宽明确时才可靠生效；否则浏览器仍按 HTML 顺序从左往右分配列位置，只是文字朝右写而已。- 最稳妥的做法：调整模板或 JS 生成逻辑，让
<th> 和每行 <code><td> 的顺序与目标视觉顺序一致 <li>想用 JS 动态翻转？可以遍历 <code>tr，对每个childNodes调用Array.from(tr.children).reverse().forEach(el => tr.appendChild(el))，但注意这会破坏语义顺序，对屏幕阅读器不友好 - 不要指望
transform:scaleX(-1)镜像整个表格——文字也会反向，需额外transform:scaleX(-1)回正，维护成本高且影响事件坐标
RTL 表格真正的复杂点不在 CSS 属性本身，而在于它暴露了 HTML 表格模型与书写方向之间的根本张力：DOM 顺序 ≠ 渲染顺序，而浏览器只保证前者语义正确。一旦列顺序必须改变，就得动结构，不是加个 style 能解决的。
- 最稳妥的做法：调整模板或 JS 生成逻辑，让
- 务必重置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
