点击按钮仅展开当前行隐藏列需用 display: table-cell 控制，避免破坏表格布局；通过 rowIndex 或 this.closest("tr")定位行，切换 col-hidden 类；IE11 需兼容 closest 和 toggle；整表横向滚动配合 scrollIntoView 聚焦展开内容。
点击按钮后只展开当前行的隐藏列，不刷新整页
直接操作 DOM 是最轻量、最可控的方式，不需要框架或重载页面。关键在于给每行设置独立的展开状态，而不是用全局 class 控制所有行。
常见错误是给整个 <table> 加 overflow-x: auto 然后试图“展开表格宽度”——这只会让表格整体横向滚动，不是“局部展开某一行”。真正要的是：点击某行的按钮，仅该行额外显示几列（比如详情、操作日志等），其他行保持原样。
- 为需要展开的列添加统一 class，例如
col-hidden，初始 CSS 设为display: none - 按钮放在对应行的某个单元格里，绑定
onclick或事件委托，传入rowIndex或直接用this.closest("tr") - JS 逻辑只查找当前行下的
.col-hidden元素，调用toggle()或切换 class
用 display: table-cell 避免列宽错乱
如果直接用 display: block 或 flex 展开隐藏列，会破坏表格布局结构，导致列对不齐、表头偏移。必须保持 <td> 的原生渲染行为。
正确做法是：隐藏时用 display: none，展开时恢复为 display: table-cell（不是 inline 或 block）。
立即学习“前端免费学习笔记（深入）”；
-
display: table-cell能继承表格的列宽计算逻辑，和<th>/<td>行为一致 - 避免在隐藏列上设固定
width，优先用min-width+white-space: nowrap防止内容撑爆 - 如果用了
colspan或rowspan，展开列前先检查是否与跨格冲突，否则可能触发浏览器 layout 重排异常
兼容 IE11 时不要用 closest() 和 toggle()
IE11 不支持 Element.prototype.closest() 和 classList.toggle() 的第二个参数（条件切换），但支持基础的 classList.add/remove 和父元素遍历。
实操建议：
- 用
while (el && el.tagName !== "TR") el = el.parentNode替代closest("tr") - 用
el.classList.contains("col-hidden") ? el.classList.remove("col-hidden") : el.classList.add("col-hidden")替代toggle() - 避免箭头函数和
const声明（若需支持 IE），改用var和function
展开后内容过长导致横向滚动条只出现在当前行
默认表格容器不会因单行变宽而出现滚动条，滚动条属于整个 <table> 或其父容器。若只想让展开行自己横向滚动，得把该行单独包一层 <div style="overflow-x: auto"> ——但这样会破坏表格语义和屏幕阅读器识别。
更稳妥的做法是：让整张表支持横向滚动，但控制“视觉焦点”：
- 给
<table>外层加<div style="overflow-x: auto; width: 100%"> - 展开某行后，用
scrollIntoView({ inline: "nearest" })滚动到该行左端，用户自然看到新增列 - 避免对
<tbody>单独设 overflow，会导致 tbody 与 thead 脱离，固定表头失效
真正难处理的是响应式场景下小屏设备：展开列太多时，用户可能根本找不到滚动条。这时候得加一个显眼的「→」提示图标，且只在 scrollWidth > clientWidth 时显示。
