layui表格单元格点击后出现蓝色边框是浏览器对:focus状态的默认outline样式，因td内含tabindex元素触发；应通过css精准设置.layui-table td,th,[tabindex],.layui-btn{outline:none!important}解决，兼顾可访问性。
layui表格单元格点击后出现蓝色边框是什么原因
这是浏览器默认的 :focus 轮廓（outline）样式，layui 的 td 或内部可聚焦元素（比如带 tabindex 的 div）被点击后触发了焦点状态，chrome/firefox 等会显示默认蓝色外边框。
直接禁用表格内所有单元格的 focus outline
最稳妥的做法是通过 CSS 移除表格区域内的焦点轮廓，不影响其他功能。Layui 表格容器有固定类名，可精准作用：
.layui-table td,
.layui-table th,
.layui-table tbody tr:hover td,
.layui-table tbody tr:hover th {
outline: none !important;
}
<p>/<em> 如果表格里用了自定义可聚焦元素（如带 tabindex 的 div），也一并处理 </em>/
.layui-table [tabindex] {
outline: none !important;
}</p>
- 必须加
!important，因为 Layui 内部某些样式或 inline style 可能覆盖你的规则 - 不要只写
td:focus—— 很多时候焦点不在td自身，而在其子元素上，所以用属性选择器更可靠 - 避免全局写
*:focus { outline: none }，会破坏表单控件、按钮等的可访问性
为什么不能只改 layui.css 或用 JS 移除 tabindex
Layui 渲染表格时，部分列（尤其是含 lay-event 的操作列）会自动给内部元素加 tabindex="0"，目的是支持键盘导航。单纯删掉这个属性会导致：
- 键盘用户无法用 Tab 键聚焦到操作按钮，违反 WCAG 可访问性要求
- JS 绑定的
lay-event事件可能失效（依赖元素可聚焦触发） - 修改 layui 源码或动态删
tabindex容易在重绘表格（如分页、重载）后失效
如果用了自定义模板列，还要注意这些
在 templet 里手写的按钮或链接，容易漏掉样式控制：
{field:'opt', title:'操作', templet: function(d){
return '<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>';
}}
- 这类按钮默认有
outline，需额外加 CSS：.layui-table .layui-btn { outline: none !important; } - 如果用了
<a href="javascript:;"></a>，记得加outline: none，否则点击后仍留蓝框 - 不要用
onfocus="this.blur()"这类 JS 方式移除焦点 —— 会打断键盘导航流程，且影响屏幕阅读器识别
去掉蓝框这事，表面是样式问题，实际卡点常在「既要视觉干净，又不能砍掉可访问性支撑」。重点盯住 tabindex 和 outline 的共存关系，而不是一删了之。
