Less中用.responsive-table Mixin实现响应式表格的正确做法是：以语义类名（如.col-phone）标识列，通过参数化Mixin统一控制visibility:hidden+width:0的隐藏逻辑，避免display:none导致塌宽，并用嵌套div.row-detail替代tr详情行保结构。
Less中用 .responsive-table Mixin 控制单元格显隐
响应式表格最常踩的坑，是直接在 @media 里写重复选择器，导致维护困难、断点逻辑散落。Less 的 Mixin 是唯一靠谱解法——把「哪些列在什么断点下隐藏」抽成可复用、带参数的逻辑。
核心思路：给每列加语义类名（如 .col-phone），再用 Mixin 统一绑定断点与显示规则。不是靠 JS 切换 class，也不是靠 display: none 硬删，而是用 visibility: hidden + width: 0 保结构、防错位。
-
.responsive-table接收两个参数：@breakpoint（断点值）和@hidden-cols（要隐藏的类名列表，如.col-phone, .col-status） - Mixin 内部用
each()遍历@hidden-cols，避免手写多条规则 - 必须用
visibility: hidden而非display: none，否则table-layout: fixed下容易塌列宽
为什么不能直接用 @media 套选择器写死？
因为一旦表格列数增加或断点调整，就得全局搜 @media (max-width: 768px) 改七八处，漏一个就错位。更麻烦的是，不同页面的表格隐藏策略不同（比如用户列表要藏操作列，日志表要藏 IP 列），硬编码根本没法复用。
常见错误现象：table tr td:nth-child(3) { display: none } —— 这种写法完全脱离语义，后续加列就全乱；或者用 !important 强盖默认样式，结果在深色模式下失效。
立即学习“前端免费学习笔记（深入）”；
- 用类名控制比 nth-child 可靠：
.col-actions比td:nth-child(5)更易读、更抗变更 - 所有断点统一走变量定义，比如
@bp-mobile: 480px，改一处全更新 - Mixin 必须放在
:not(.no-responsive)条件下，方便某些特殊表格临时关闭响应式
.hide-on-mobile 类名要不要加？还是纯靠 Mixin？
纯靠 Mixin 就够，额外加工具类反而制造混乱。你不会在 HTML 里写 <td class="col-name hide-on-mobile">，因为「哪列该在移动端隐藏」是设计层决策，应由样式层统一控制，而非让模板开发者手动加类。
真正需要的是反向控制：比如某列默认隐藏，只在桌面端显示，那就用 .show-on-desktop 类配合 Mixin 实现，但这个类仍由 Mixin 生成，不暴露给 HTML。
- 不要在 HTML 中混用
col-xxx和hide-on-xxx两类语义，会冲突 - 如果后端渲染需动态开关某列，用 data 属性更安全，比如
data-hide-mobile="true"，再用 Less 的[data-hide-mobile="true"]匹配 - 注意 IE11 不支持
each()，若需兼容，得降级为手动展开的 Mixin 版本
移动端展开行详情时，如何避免 tr.detail-row 破坏表格结构？
这是最容易被忽略的点：用 tr 插入详情行，会破坏 thead/tbody 结构，导致屏幕阅读器误读、打印样式错乱，甚至某些安卓 WebView 渲染异常。
正确做法是放弃额外 tr，改用 td 内嵌 <div class="row-detail">，并用 colspan 占满整行。Mixin 要同步控制这个 div 的显隐和动画。
- 详情区域必须用
transform: translateY()做展开动画，不用height，避免重排 -
row-detail的父td需设position: relative，否则z-index失效 - 如果表格用了
table-layout: fixed，详情区宽度必须用calc(100% + 1px)微调，绕过浏览器四舍五入导致的 1px 缝隙
