无法直接折叠单个<td>，因其display:table-cell不支持transition和尺寸动画，display:none会破坏表格结构，max-w-0对inline-table无效；可行方案是改用flex布局或在<td>内嵌div控制内容折叠。
直接对 <td> 或 <th> 加 hidden 或 max-w-0 无法实现“单元格折叠”——表格结构本身不支持单个单元格的收缩动画，必须退到容器层控制显示逻辑。
为什么不能直接折叠单个 <td>
CSS 表格单元格（<td>）受 table-layout 和行高/列宽约束，display: none 会破坏整行结构，max-w-0 + overflow-hidden 对 inline-table 元素无效，visibility: hidden 只隐藏视觉但保留占位。真正可折叠的是「整行」或「内容块」，不是单元格本身。
- 常见错误现象：
td:hidden导致该列宽度塌缩，相邻列突然拉伸，甚至触发重排错乱 - 表格默认是
display: table-cell，不响应transition、transform或大多数尺寸类 - 即便用
sm:hidden，也只是断点切换，没有过渡动画，也不算“折叠效果”
用 flex 替代 table 实现可折叠单元格内容
把每个 <tr> 改成 flex flex-col sm:flex-row 容器，每列变成独立 <div>，这样每个“单元格”就变成普通块级元素，可自由加 max-h-0、overflow-hidden、transition-all。
- 移动端单列堆叠：
flex flex-col+ 每个div设max-h-0/max-h-[200px] - 桌面端恢复为行布局：
sm:flex-row+ 移除高度限制，靠flex-1自适应 - 关键要加
overflow-hidden到每个“伪单元格”容器，否则动画过程中内容会溢出 - 示例结构：
<div class="flex flex-col sm:flex-row"> <div class="max-h-0 overflow-hidden transition-all duration-300 sm:max-h-none">姓名</div> <div class="max-h-0 overflow-hidden transition-all duration-300 sm:max-h-none">邮箱</div> </div>
保留 <table> 时，只折叠单元格内嵌内容
如果必须用原生 <table>（比如数据导出、无障碍要求），唯一安全做法是：在 <td> 内部包裹一层 <div>，对该 <div> 做折叠控制。
立即学习“前端免费学习笔记（深入）”；
- 不要动
<td>本身，只操作它的子容器：<td><div class="max-h-0 overflow-hidden...">...</div></td> - 需配合
table-fixed+w-full，否则内部max-h-可能被表格自动撑开 - 避免在该
<div>上用flex或grid，容易与表格布局冲突；优先用block+line-clamp-2配合点击展开 - 移动端小屏下，
line-clamp-2比动画更轻量可靠；真要动画，用max-h-[100px]而非max-h-16（预设类高度固定，易截断）
折叠状态同步与交互陷阱
纯 CSS 折叠依赖状态源（如 <input type="checkbox">），但在表格中容易失效——peer 选择器无法跨 <tr>，:checked ~ td 不匹配。
- 最稳方案：用 JS 控制
classList.toggle()，绑定到每行的展开按钮，目标是该行内的所有“内容容器” - 别用
document.querySelectorAll('td')批量操作——不同行可能有不同折叠策略，应按行实例单独管理 - React/Vue 中注意 key 稳定性：折叠状态若存在组件内，
key改变会导致状态丢失；建议用useState配合 row ID 存储布尔值 - 滚动容器内折叠后，记得手动调用
el.scrollIntoView({ block: 'nearest' })，否则展开内容可能被遮挡
表格里所谓“单元格折叠”，本质是放弃单元格语义，转向容器化布局；硬要在 <table> 里做动画，90% 的坑都来自对 table-cell 渲染行为的误判——先确认是否真需要 <table> 语义，再决定从哪一层动手。
