border-inline-width 对 table、tr、td 等表格元素无效，因其依赖逻辑盒模型而表格使用表格盒模型；控制“行首列”边框应使用 td:first-child/th:first-child 配合 border-left（LTR）或 border-right（RTL），并设置 border-collapse: collapse。
border-inline-width 不能用于 HTML 表格的“逻辑行首”边框控制，它对 table、tr、td 等表格元素无效。
这个 CSS 属性只在支持逻辑盒模型且元素 display 值为 inline 或 inline-level（如 span、input）时才起作用，而表格元素使用的是表格盒模型（table box model），其边框行为由 border-collapse 和传统物理方向属性（border-left、border-top 等）决定。
为什么 border-inline-width 在 table 上不生效
浏览器会忽略对 table、tr、th、td 设置的 border-inline-width，因为：
- 表格行（
tr）不是可渲染的盒容器——它不接受边框样式，边框实际绘制在td/th上； -
border-inline-start/border-inline-end对应的是书写方向的“首/尾内联边”，但表格单元格的布局不按内联流解析； - 即使强制设置
display: inline-table，border-inline-width也仅影响该元素自身的内联轴边框，无法精准映射到“某一行的起始列边框”。
真正能控制“行首列”边框的方式
所谓“逻辑行首”，实际是指每行第一个 td 或 th 的左侧边框（LTR 语言下）或右侧边框（RTL 下）。要统一控制它，必须用物理方向属性 + 选择器：
立即学习“前端免费学习笔记（深入）”；
- 对 LTR 页面：用
td:first-child或th:first-child配合border-left； - 对 RTL 页面：用
[dir="rtl"] td:first-child配合border-right； - 若需响应式适配，可结合
@supports (direction: ltr)或直接用border-inline-start—— 但**仅对td单元格本身有效**，且需确保其display未被表格模型覆盖（通常默认就是table-cell，此时仍推荐用border-left）； - 别忘了加
border-collapse: collapse，否则first-child的左边界可能被相邻单元格边框覆盖。
常见错误：误以为 tr 能设边框
写 tr { border-inline-start: 2px solid red; } 不会显示任何边框，原因如下：
-
tr元素**没有可绘制的边框盒**，它的样式会被子元素（td）的边框覆盖； - 即使给
tr设了display: block，也会破坏表格结构，导致td排列错乱； - 想高亮整行左侧，正确做法是：
td:first-child { border-left: 3px solid #007bff; }。
替代方案：用 border-left + :first-child 实操示例
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
}
/* 行首单元格加粗左线 */
td:first-child,
th:first-child {
border-left: 3px solid #28a745;
}
</style>
<table>
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>这段代码会让每行第一个单元格拥有绿色加粗左边界，稳定、兼容、可预测。不要试图绕路用 border-inline-width——它在这里只是个无效声明。
表格边框的可控性建立在明确元素层级和盒模型认知上，混淆逻辑属性与表格结构，是调试中最常卡住的地方。
