最稳定可维护的方式是用data-column属性标记列并配合媒体查询统一控制显隐；必须同步隐藏thead和tbody中所有对应列单元格，避免错位，且优先通过class切换而非直接操作style.display。
直接用 display: none 配合 [data-column="xxx"] 选择器，在媒体查询里控制整列显隐，是最稳定、可维护的方式。别碰 <col>、别依赖 nth-child、也别只隐藏 <td> 忘了 <th>。
为什么必须用 data-column 而不是 nth-child
列顺序一变，td:nth-child(3) 就指向错列；后端加个条件字段、前端插个空列、Vue 动态渲染删掉某列——nth-child 立刻失效。而 data-column="email" 是语义化身份标签，和位置无关。
-
data-column值统一用小写+短横线，比如last-login-time，避免空格或大写导致选择器匹配失败 - React 中需写成
data-column="email"（不能写dataColumn），否则属性被过滤 - Vue 渲染时确认
v-bind:正确透传该属性，别被v-html或模板编译吃掉
媒体查询里怎么写才不崩表头
只隐藏 <tbody> 里的 <td>，却不处理 <thead> 的 <th>，浏览器会自动补白或压缩宽度，表头和数据必然错位。
- 必须一次性选中整列所有单元格：
document.querySelectorAll('[data-column="phone"]')天然包含<th>和所有<td> - 如果表格含
<tfoot>，也要纳入查询范围，否则页脚列对不齐 - 媒体查询示例：
@media (max-width: 414px) { [data-column="phone"], [data-column="address"] { display: none; } }
display: none 在表格里有什么坑
它确实能彻底移除元素、重排剩余列，但前提是没锁死布局。一旦用了 table-layout: fixed 或 <colgroup> 定宽，隐藏列后其他列不会自动拉伸。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 若用了
<colgroup>，JS 切换显隐时得同步操作对应<col>：只能设visibility: collapse（display: none对<col>无效） - 别在内联样式里手动写
style.display = 'table-cell'恢复——不同浏览器对表格元素默认display值解析不同 - 优先用
el.classList.toggle('hidden-column')，CSS 里只定义.hidden-column { display: none; }
移动端堆叠显示替代方案
当屏幕太窄、连关键列都塞不下时，display: none 整列就不是最优解了。改用 data-label + 块级堆叠，语义和可访问性都更健壮。
- 每个
<td>加data-label，值与对应<th>文本严格一致：<td data-label="邮箱">zhang@example.com</td> - CSS 关键三步：
tbody tr { display: block; }、tbody td { display: block; }、td::before { content: attr(data-label) ": "; } - 必须加
thead { display: none; }，否则屏幕阅读器会重复读表头
真正麻烦的不是“怎么藏”，而是藏完之后列宽是否塌缩、表头是否对齐、<colgroup> 是否干扰、以及 JS 动态增删行后规则是否还生效——这些细节不提前对齐，上线后就是线上事故。
