outline-style 在 <td> 上基本无效，因其渲染在非可聚焦元素上未定义规范，Firefox/Safari 常裁剪或忽略；推荐用 box-shadow 模拟虚线外框，稳定跨浏览器。
outline-style 不能可靠地为 HTML 表格单元格（<td> 或 <th>）添加“选中虚线框”——它根本不会按预期渲染，尤其在 Firefox 和 Safari 中常被忽略或截断。
为什么 outline-style 在 <td> 上基本无效
表格单元格默认是 display: table-cell，而 outline 的渲染行为在非可聚焦元素上本就未定义；即使手动加 tabindex，多数浏览器仍会：裁剪 outline 到单元格内容盒内、不响应 outline-offset、或直接静默丢弃样式。这不是 bug，是规范允许的实现差异。
真正可用的替代方案：用 box-shadow 模拟虚线外框
这是目前最稳定、跨浏览器一致的做法，且能精确控制虚线样式和偏移量。
- 给目标单元格加 class，例如
selected - 用
box-shadow模拟“外轮廓”，避免影响布局：td.selected { box-shadow: 0 0 0 2px dashed #007bff; } - 如需兼容旧版 IE（
box-shadow不支持），改用border+outline组合（但 border 会挤占空间，需提前预留border-collapse: separate和border-spacing）
如果非要聚焦操作，必须确保元素可聚焦且 outline 可见
仅当单元格需要键盘导航时才考虑此路径：
立即学习“前端免费学习笔记（深入）”；
- 给
<td>添加tabindex="0"（或"-1"仅 JS 聚焦） - 显式设置
outline: 2px dashed #007bff，并覆盖浏览器默认 outline 样式 - Firefox 下还需加
outline-offset: 2px才可能看到完整虚线；Chrome 可能仍只显示半截 - 务必测试 tab 键导航是否连贯——表格结构复杂时，
tabindex易导致焦点顺序混乱
真正要解决“视觉选中反馈”，box-shadow 是唯一靠谱选择；outline 在表格里不是“没写对”，而是浏览器压根没打算让它好好工作。
