直接用 display: none 隐藏表格单元格会错位，因 table-cell 变为 none 后整行渲染逻辑断裂，相邻列拉伸补位导致表头与数据行不对齐，且需同步处理 thead th 和 tbody td 并统一 data-column 属性。
为什么直接用 display: none 隐藏 <td> 会错位？
<p>表格单元格默认是 <code>display: table-cell，直接加 display: none 会让整行渲染逻辑断裂：相邻列会自动拉伸补位，表头和数据行对不齐，甚至触发重绘异常。尤其在 Bootstrap 或 Element Plus 这类封装组件里，td 被包裹在动态生成的 tr 中，CSS 选择器若没覆盖到 th 和所有 td，就会只剩表头悬空。
必须同步处理 thead th 和 tbody td，且确保它们使用相同的定位依据——不能只靠 :nth-child(3) 这类索引，因为后端加一列或前端调整列序，规则立刻失效。
- 给每列的
th和所有对应td统一加data-column="status" - CSS 里写
[data-column="status"] { display: none; }，不依赖位置 - 如果用 Vue/React 渲染，确认框架没过滤掉
data-column属性（比如 Vue 的v-bind默认不透传自定义属性）
Bootstrap 5 怎么让「操作」列只在桌面显示？
Bootstrap 5 已废弃 hidden-xs 等旧类，直接写 d-none 会导致 td 变成 display: none，破坏表格结构。正确做法是先设隐藏，再在指定断点“恢复”为表格单元格。
- 给目标列所有单元格加类：
class="d-none d-md-table-cell" - 确保
th和每个td都带上该类，否则表头不消失 - 不要用
d-sm-none—— 它会让元素变成display: none，不是“隐藏列”，而是“毁掉表格” - 如果列数动态变化（如用户拖拽排序），这类写死类名的方式不可靠，得切回
data-column+ JS 控制
用媒体查询隐藏整列时，@media 规则怎么写才不翻车？
常见错误是只在小屏下设 display: none，却不声明桌面端显式恢复。一旦全局 CSS 或 UI 库重置了 display 值（比如设成 flex），列就再也出不来。
- 推荐移动优先写法：
.hide-on-mobile { display: none; }先默认隐藏 - 再用
@media (min-width: 769px) { .hide-on-mobile { display: table-cell; } }桌面端恢复 - 断点别硬写
768px：iPad 竖屏常卡在边界，改用(max-width: 767.98px)更稳 - 避免
visibility: hidden—— 它保留占位，列宽还在，主内容被挤偏
Element Plus 或 Ant Design 表格里隐藏列，为什么不能用 v-if？
v-if 会触发整个 el-table-column 组件卸载重载，1000 行数据下耗时 120–200ms，滚动位置、选中状态、排序字段全丢。真正轻量的方案是绕过 Vue 的响应式更新，直接操作 DOM 显隐。
- 用
ref拿到表格 DOM：tableRef.value.$el - 通过
data-column查找所有目标单元格：tableEl.querySelectorAll('[data-column="last-login-time"]') - 批量加
hidden-column类，交由 CSS 控制：.hidden-column { display: none; } - 千万别用
el.style.display = 'none'—— 恢复时无法还原原始display值（可能是table-cell或table-header-group）
最易被忽略的一点：无论用哪种方式，thead 和 tbody 必须同步操作。漏掉任意一个 th 或某一行的 td，列对齐就彻底崩坏，而且这种错位在开发环境很难复现，往往上线后用户反馈才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
