display: none在表格中危险，会导致table-layout塌陷、列宽错位；应改用visibility: hidden + width: 0 + min-width: 0组合控制，并通过.responsive-table mixin统一管理响应式隐藏逻辑。
直接用 .responsive-table Mixin 控制语义类显隐，别碰 display: none 和 nth-child —— 否则 table-layout 会塌、列宽错位、加列即崩。
为什么 display: none 在表格里是危险操作
表格元素对布局敏感，display: none 会让 td 完全退出渲染流，导致 table-layout: fixed 下后续单元格自动收缩占位，列宽失守。尤其在移动端隐藏某列后，桌面端再显示，宽度常无法恢复。
正确做法是组合 visibility: hidden + width: 0 + min-width: 0，保留结构占位但视觉不可见：
.col-phone {
visibility: hidden;
width: 0;
min-width: 0;
}
必须配合 table-layout: fixed 和明确的 th/td 宽度（如 width: 120px），否则浏览器仍可能重算。
如何用 .responsive-table Mixin 统一管理多断点隐藏逻辑
把「哪列在什么断点下隐藏」抽成参数化逻辑，避免每个表格都手写一遍 @media：
-
@breakpoint传入断点值（如@bp-mobile），不是写死480px -
@hidden-cols传入类名列表（如.col-ip, .col-actions），不是靠nth-child(4) - Mixin 内部用
each()遍历，生成干净规则，不漏不重 - 所有断点变量统一定义在顶层，改一处全局生效
示例调用：
.user-table {
@include .responsive-table(@bp-mobile, .col-ip, .col-status);
@include .responsive-table(@bp-tablet, .col-created-at);
}
怎么让详情行（tr.detail-row）在响应式时不破坏表格结构
直接在 tr 上加 display: none 会导致 tbody 结构断裂，尤其在 Safari 和旧版 Edge 中易出错。
安全解法是放弃额外 tr，改用嵌套 div.row-detail 放在对应 tr 内部：
-
tr始终存在，仅控制其子td的padding-bottom留白 -
.row-detail作为绝对定位或 flex 子项，不参与表格行高计算 - 隐藏时只对
.row-detail应用visibility: hidden，不影响tr渲染
这样既保语义、又兼容跨端，也不依赖 JS 切换 DOM 结构。
容易被忽略的关键点：HTML 层不能混用语义类和工具类
不要在 td 上同时写 class="col-name hide-on-mobile" —— 这等于把设计决策（哪列该隐藏）下放到模板层，违背样式与结构分离原则。
真正可控的方式是：
- HTML 只写语义类：
<td class="col-name"> <li>所有隐藏逻辑由 Less Mixin 在样式层集中控制</li> <li>如需反向逻辑（某列默认隐藏、仅桌面显示），用 <code>.show-on-desktop类，但它仍是 Mixin 生成，不暴露给 HTML - 后端动态控制时，用
data-hide-mobile="true"配合属性选择器，比 class 更安全
跨端统一的前提，是样式逻辑不散落、不耦合、不依赖运行时判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
