小屏幕处理表格核心是结构安全与体验平衡：必须用data-column统一标记整列并同步控制th/td显隐，≥4列优先采用data-label堆叠方案，禁用visibility:hidden和table-layout:fixed不当用法。
小屏幕处理表格，核心不是“要不要隐藏”，而是“怎么藏不破坏结构、怎么滚不牺牲体验”。直接用 display: none 隐藏某几列，或只给 <table> 加 <code>width: 100%，大概率导致错行、语义断裂、屏幕阅读器读错——这些都不是样式问题，是表格渲染机制决定的。
优先用 data-column + 类控制整列显隐
别用 th:nth-child(3) 这类位置选择器。列序一变（比如后端加了操作列），原本该隐藏的手机号可能就暴露了。正确做法是给语义一致的单元格统一打标：
<th data-column="email">邮箱</th><td data-column="email">user@ex.com</td>- 媒体查询中同步控制：
@media (max-width: 480px) { [data-column="email"], [data-column="phone"] { display: none; } } - 桌面端恢复显示：
@media (min-width: 768px) { [data-column="email"] { display: table-cell; } }
≥4 列时，推荐 data-label 堆叠替代隐藏
横向滚动对用户极不友好，尤其字段有强业务含义（如“下单时间”“收货地址”）时，滑来滑去根本记不住哪列对应什么。堆叠方案让每行自成一个信息块：
- HTML 中每个
<td> 加 <code>data-label：<td data-label="订单号">ORD-2026-001</td> - 小屏下隐藏表头：
thead { display: none; } - 把行和单元格设为块级：
tbody tr { display: block; } tbody td { display: block; position: relative; } - 用伪元素注入标签：
td::before { content: attr(data-label) ": "; font-weight: bold; } <table> 加 <code>display: block; min-width: fit-content;（或设具体值如min-width: 1200px）- 禁用
white-space: nowrap在<td> 上，否则长 URL 或 Base64 会直接撑爆容器 <li>若需首列固定（如 ID 或姓名），可对 <code>th:first-child, td:first-child加position: sticky; left: 0; background: white; -
<col>元素不支持display: none，它只是占位符，设了也无效 - 禁用
visibility: hidden隐藏列——它保留布局空间，列宽残留导致对齐错乱 -
table-layout: fixed必须配width: 100%和至少一列显式宽度（如<th style="width: 20%">），否则不生效 <li>发邮件场景慎用 <code>table-layout: fixed，Outlook（基于 Word 渲染）完全不识别
必须滚动时，确保容器真正生效
光写 overflow-x: auto 不一定管用——<table> 默认会撑宽父容器，浏览器优先保证表格完整显示。关键要切断这种行为：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>外层容器设 <code>max-width: 100vw; overflow-x: auto; -webkit-overflow-scrolling: touch;
避免踩坑的硬性提醒
有些写法看似省事，实则埋雷：
