justify-self 不能用于 HTML 表格元素（如 <td>、<th>），因其依赖 CSS Grid 布局模型，而表格默认使用 table 布局，浏览器会忽略该属性；需用 text-align 控制单元格内容对齐，或改用 Grid 布局实现精细对齐。
justify-self 不能用在 HTML 表格（<table>）中，它只对 CSS Grid 布局生效。
为什么 justify-self 在 <td> 或 <th> 上无效
HTML 表格元素（<table>、<tr>、<td>）默认使用表格布局模型（table layout），不是 Grid 容器。浏览器会忽略写在 <td> 上的 justify-self，既不报错也不生效 —— DevTools 的 computed 样式里甚至不会显示该属性。
- 即使给
<td>加了display: grid，它也只是让单元格内部变成网格，不影响它在整个表格里的位置 - 想控制
<td>在整张表中的水平位置，传统做法是用align="right"（已废弃）或text-align: right（仅影响内容，不移动单元格本身） - 表格模型没有“单元格内独立对齐空间”的概念，
justify-self所依赖的「网格区域 + 行轴余量」根本不存在
想让某个表格单元格内容靠右？用 text-align，不是 justify-self
这是最常见误用场景：以为加个 justify-self: end 就能让 <td> 内文字右对齐。其实只需：
- 对
<td>或<th>直接设text-align: right - 若要居中，用
text-align: center；垂直居中则配合vertical-align: middle - 注意：
text-align作用于块级内容（如文本、<span>），对<div>子元素无效，除非子元素设了display: inline-block或类似
真要用 justify-self？先换成 Grid 布局
如果你需要单个“单元格”级别的精细对齐（比如按钮靠右、图标居中、文本左对齐），说明你已经超出表格语义适用范围。此时应放弃 <table>，改用 Grid：
立即学习“前端免费学习笔记（深入）”；
- 把容器设为
display: grid，用grid-template-columns模拟列宽 - 每个“单元格”用
<div>替代<td>，并确保是直系子元素 - 对目标项加
justify-self: end，但必须满足前提：它所在网格轨道有空余宽度（例如列定义为1fr，且该项未设固定宽或width: 100%） - 避免同时写
margin-left: auto—— 它会静默覆盖justify-self
真正容易被忽略的点是：属性名带 “self”，不代表它能随便加在哪都起作用；它只响应 Grid 项（grid item），而 <td> 默认不是 Grid 项，哪怕你给它套了一层 div 也没用 —— 只有直系子元素才被 Grid 容器识别为项。
