在 `table-layout: fixed` 表格中，无法通过 css 直接“覆盖”某单元格的宽度，但可通过 `
table-layout: fixed 的核心特性是：表格列宽由首行（或
✅ 正确解法是语义化结构 + DOM 控制：为每组可展开数据添加一个独立的
以下是完整实现示例：
| 用户 ID | 姓名 | 邮箱 | 状态 |
配套 CSS（关键点）：
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
td {
padding: 8px 12px;
border: 1px solid #ddd;
overflow: hidden;
text-overflow: ellipsis;
}
.expand-trigger {
cursor: pointer;
background-color: #f9f9f9;
}
.expand-trigger:hover {
background-color: #f0f8ff;
}
.hidden {
display: none;
}
.expanded-details {
font-size: 0.9em;
color: #555;
line-height: 1.5;
}JavaScript 控制逻辑（推荐使用事件委托，避免重复绑定）：
document.addEventListener('click', (e) => {
const triggerRow = e.target.closest('tr.expand-trigger');
if (!triggerRow) return;
const contentRow = triggerRow.nextElementSibling;
if (contentRow && contentRow.classList.contains('expand-content')) {
contentRow.classList.toggle('hidden');
}
});⚠️ 注意事项：
- colspan 值必须精确等于表格总列数（如上例为 colspan="4"），否则布局错乱；
- 不要将扩展内容写在原
内部（如 ），这仍受 fixed 布局约束，宽度无法突破； - 若表格列数动态变化，需用 JS 动态计算 colspan（triggerRow.cells.length）；
- 为提升可访问性，建议添加 aria-expanded 属性并配合键盘支持（Enter/Space 键触发）。
该方案完全兼容 table-layout: fixed，不破坏原有列宽控制，同时保持语义清晰、样式可控、性能良好，是生产环境推荐的标准实践。
