应使用 transform: translateX(-100%) 隐藏侧边栏并保留布局占位，配合 flex-shrink: 0、overflow: hidden 容器及 calc(100% - var(--sidebar-width)) 动态计算表格宽度，仅对 transform 和 opacity 做动画，用 pointerdown 统一处理触摸与点击事件。

侧边栏折叠时表格列宽错乱怎么 fix

直接用 display: none 隐藏侧边栏会导致表格的 colgroup 或 table-layout: fixed 失效，列宽被重算，内容挤成一团。关键不是“隐藏”，而是“保留占位但视觉收起”。

• 用 transform: translateX(-100%) + transition 移出视口，不触发重排
• 给侧边栏加 flex-shrink: 0，防止 flex 容器压缩它影响表格宽度计算
• 表格外层套一层 overflow: hidden 容器，截断移出部分，避免滚动条意外出现
• 不要在 th/td 上写死 width 像素值，改用 min-width + flex-basis 配合 table-layout: fixed

如何让表格自动适配折叠/展开状态下的可用宽度

响应式不是靠媒体查询硬切，而是靠 CSS 自适应计算。核心是把表格和侧边栏放进同一个 flex 容器，并用 calc() 动态分配宽度。

• 侧边栏设固定宽度（如 240px），展开时表格宽度为 calc(100% - 240px)
• 折叠时侧边栏仍占布局空间但不可见，表格宽度恢复为 100% —— 这需要 JS 切换一个 class 触发 CSS 变量更新
• 推荐用 CSS 自定义属性：定义 --sidebar-width: 240px，再在表格上写 width: calc(100% - var(--sidebar-width))，JS 只需切换 --sidebar-width: 0
• 注意 Safari 对 calc() 在 table 元素上的支持较弱，建议把 width 写在包裹 table 的 div 上

折叠动画卡顿或闪烁的常见原因

表格重绘成本高，稍不注意就会掉帧。不是所有 CSS 属性都适合动画，尤其涉及表格结构时。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 只对 transform 和 opacity 做动画，避免触发布局（layout）和绘制（paint）
• 给侧边栏加 will-change: transform（仅在动画触发前临时添加，结束后移除）
• 禁用表格自带的 border-collapse: collapse 动画 —— 它会强制重绘全部单元格，改用 box-shadow 模拟分隔线
• 如果用了 sticky 表头，确保父容器有 overflow-anchor: none，否则折叠时 sticky 位置会跳变

移动端触摸操作下侧边栏无法可靠切换

点击区域小、误触频繁、手势冲突 —— 这不是 JS 绑定问题，而是事件穿透和目标判定没处理好。

立即学习“前端免费学习笔记（深入）”；

• 折叠按钮必须用 button 元素，而非 div，保证可访问性和默认 focus 状态
• 在侧边栏上监听 click 时，检查 event.target === event.currentTarget，防止点到内部链接或按钮时也触发折叠
• 加一层半透明遮罩（position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99），点击遮罩收起侧边栏，解决“点不到空白处”的问题
• 避免同时监听 touchstart 和 click，用 pointerdown 统一处理，再根据 event.pointerType 区分鼠标/触控

真正难的不是实现折叠，而是折叠后表格的列对齐、文字换行、固定表头和滚动同步这些细节——它们不会报错，但会在不同设备上悄悄错位。