border-inline-start 在表格中无效的主因是 border-collapse: collapse 导致边框合并，且其逻辑映射依赖 writing-mode 和 direction；需设为 separate、显式声明书写模式并避免简写冲突。
border-inline-start 是 CSS 逻辑边框属性，它不直接作用于 <table> 或 <td> 元素的“视觉起始边”，而取决于元素的书写模式（writing-mode）和文本方向（direction）。在默认 HTML 表格（writing-mode: horizontal-tb, direction: ltr）下，border-inline-start 实际对应的是**左侧边框**——但这个映射不是静态的，且表格单元格的边框渲染还受 border-collapse 控制。
为什么给 <td> 加 border-inline-start 看不到效果？
常见现象：给 <td> 设置 border-inline-start: 2px solid red，页面没反应或边框错位。
- 表格默认
border-collapse: collapse，此时单元格边框会合并，border-inline-start可能被相邻单元格的边框覆盖或抵消 -
border-inline-start是逻辑属性，其物理方向依赖父容器的writing-mode和direction；若未显式设置，浏览器按根元素推导，但表格内部单元格继承可能不一致 - 部分旧版浏览器（如 IE、早期 Safari）根本不支持该属性，仅靠
@supports检测不够，需实测渲染
正确应用 border-inline-start 的前提条件
要让 border-inline-start 在表格中稳定生效，必须同时满足：
- 将表格或目标单元格设为
border-collapse: separate（禁用边框合并） - 明确设置
writing-mode和direction，例如：writing-mode: horizontal-tb; direction: ltr（此时inline-start = left） - 确保目标元素是块级或行内块级上下文（
<td>默认是table-cell，支持该属性，但需避免被display: table-row等父级重置） - 避免与其他边框简写冲突（如不要同时写
border和border-inline-start，后者可能被覆盖）
实际可用的最小代码示例
以下代码在现代 Chrome/Firefox/Edge 中可稳定显示左侧红色边框：
立即学习“前端免费学习笔记（深入）”；
<table style="border-collapse: separate; border-spacing: 0;">
<tr>
<td style="writing-mode: horizontal-tb; direction: ltr; border-inline-start: 2px solid red; padding: 8px;">A</td>
<td style="padding: 8px;">B</td>
</tr>
</table>
注意：border-spacing: 0 保持紧凑外观，但不触发合并；若需保留 collapse 模式，border-inline-start 基本不可靠，应改用物理属性 border-left。
替代方案与兼容性权衡
当目标是支持 Safari 14.1 以下、Firefox 69 以下或需要 IE 兼容时：
- 直接使用
border-left（ltr 场景）或border-right（rtl 场景），配合[dir="rtl"]选择器切换 - 用
@supports (border-inline-start: 1px solid)包裹逻辑边框规则，降级到物理边框 - 避免在
<colgroup>或<thead>上尝试该属性——它们不渲染为盒模型，border-inline-start无效
逻辑边框真正实用的场景，是构建多语言 RTL/LTR 自适应组件，而非传统表格排版。表格本身语义偏物理布局，强行用逻辑属性容易绕进渲染细节里出不来。
