margin-inline-start比margin-left更安全，因其按文本流起始侧动态映射方向：LTR时等效margin-left，RTL时自动映射为margin-right，确保表格内按钮、图标等始终位于内容视觉起点，避免物理属性导致的布局错位。
为什么表格里用 margin-inline-start 比 margin-left 更安全
表格本身不直接响应 dir 属性的镜像逻辑，但表格内部的单元格（td、th）和嵌套元素（如按钮、图标、表单控件）会。如果你在表格行内加了一个操作按钮，并用 margin-left: 8px 控制它离文字的距离，那么在 dir="rtl" 下，这个按钮会被“钉死”在物理左侧——也就是内容末尾，视觉上跑到文字右边，完全违背“操作按钮始终在内容起始侧”的设计意图。
必须替换的典型位置包括：
-
td .action-btn的水平间距：改用margin-inline-start或margin-inline-end -
th内文本对齐：用text-align: start，而非text-align: left -
td内图标与文字间隙：用padding-inline-start确保光标/焦点首先进入视觉起点 - 表格外容器的边距控制（如
.table-wrapper）：用margin-block-start替代margin-top，避免竖排模式下错位
table-layout: fixed 和逻辑属性能共存吗
能，但要注意生效层级。逻辑属性作用于元素盒模型，而 table-layout: fixed 是表格渲染引擎的开关，两者不冲突，但顺序和范围很关键。
常见误判是以为启用了 table-layout: fixed 就自动“接管”所有子元素方向逻辑——其实它只影响列宽计算，不影响 td 内部的 margin/padding/text-align 行为。
立即学习“前端免费学习笔记（深入）”；
实操要点：
-
table元素上设table-layout: fixed+width: 100%，这是基础约束 -
th和td上设width（推荐百分比），但不要混用inline-size——目前主流浏览器对inline-size在td上的支持不稳定，尤其 Safari ≤15.6 会忽略 - 若需对齐单元格内文字起始侧，必须在
th/td上显式写text-align: start，不能依赖继承 - 避免在
table上直接写margin-inline：部分旧版 Edge 对表格根元素的逻辑外边距解析异常，建议包裹一层div.table-container并在其上应用
哪些表格相关属性没有逻辑等价写法
不是所有物理属性都有可靠、广泛支持的逻辑版本。强行替换反而导致降级失效或布局断裂。
当前（2026年中）明确不可替代或需谨慎使用的有：
-
border-collapse：无逻辑等价属性，必须保留原写法，且只能作用于table元素 -
border-radius：border-start-start-radius等实验性属性在 Safari 中完全不支持，Chrome/Firefox 支持但行为不一致，生产环境禁用 -
colspan/rowspan：HTML 属性，与方向无关，无需改动 -
vertical-align：虽有align-self可替代，但在表格上下文中仍应优先用vertical-align: top/middle/bottom，逻辑值如self-start在td上兼容性差 -
white-space：无逻辑变体，但它是控制长文本换行的关键，必须配合table-layout: fixed使用，否则 RTL 下英文单词仍会撑破列宽
Safari ≤15.6 下表格逻辑属性的降级实操
这个版本对逻辑属性的支持断层明显：padding-block 静默忽略，margin-inline 多值简写（如 margin-inline: 8px 12px）直接失效，inset-inline-start 在绝对定位表格单元格中不触发重排。
安全降级策略不是靠 PostCSS 自动补全，而是手动分层：
- 对关键间距（如操作按钮与文字距离），用
@supports (margin-inline-start: 0)包裹逻辑写法，外层 fallback 写双物理属性：margin-left: 8px; margin-right: 8px; - 对
padding-block类需求，直接双写：padding-block: 10px; padding-top: 10px; padding-bottom: 10px; - 避免使用
margin-inline: 8px 12px这类简写，拆成margin-inline-start: 8px; margin-inline-end: 12px;，前者在 Safari ≤15.3 中整条声明被丢弃 - JS 动态插入表格行后，若需确保逻辑属性生效，不能只改
innerHTML，要触发一次强制重排，例如：el.style.opacity = 0.99; el.offsetHeight; el.style.opacity = '';
最易被忽略的是：逻辑属性生效的前提是父容器或自身有明确的 dir 值。表格本身没设 dir，但内部 td 里有个 span[dir="rtl"]，那这个 span 的子元素才能正确解析 margin-inline-start ——表格行不会自动继承语言方向。
