在 `table-layout: fixed` 的表格中，无法通过 css 直接覆盖某单元格宽度；正确做法是使用语义化 html —— 为展开内容单独添加一行，并用 `colspan` 拉伸至全宽，配合 js 控制显隐。
table-layout: fixed 的核心特性是：表格列宽由首行
因此，“为单行实现全宽扩展”的本质不是“覆盖 fixed 布局”，而是绕过单元格宽度限制，用结构化方式达成视觉效果。最佳实践是：
✅ 使用 colspan 创建跨列单元格
为每组可展开内容后插入一个独立
✅ 用 CSS 控制显隐，避免重排开销
推荐使用 display: none/block（而非 visibility: hidden 或 height: 0），既保证语义清晰，又避免 fixed 布局下高度计算异常。
✅ JS 逻辑简洁可靠
通过事件委托或直接绑定，点击目标行时切换下一行的 .hidden 类即可：
| 姓名 | 部门 | 入职日期 |
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
td { padding: 8px 12px; border: 1px solid #ddd; }
.trigger-row { cursor: pointer; background: #f9f9f9; }
.trigger-row:hover { background: #eef5ff; }
.hidden { display: none; }
.expanded-content { font-size: 0.9em; color: #555; }document.querySelectorAll('.trigger-row').forEach(row => {
row.addEventListener('click', () => {
const nextRow = row.nextElementSibling;
if (nextRow && nextRow.classList.contains('detail-row')) {
nextRow.classList.toggle('hidden');
}
});
});⚠️ 注意事项：
- colspan 值必须精确匹配当前表格实际列数（可通过 row.cells.length 动态获取）；
- 避免在 .hidden 行中嵌套复杂布局（如浮动、Flex 容器），以防 fixed 表格中高度塌陷；
- 若需动画效果，建议对 .expanded-content 内部元素使用 max-height 过渡，而非对
应用 transition（ 不支持 height 过渡）。 总结：fixed 表格的“不可覆盖性”是其性能优势的代价，而 colspan + 结构化展开行 是符合标准、兼容性好、维护成本低的正解——它不 hack 渲染机制，而是尊重 HTML 语义与 CSS 规范。
