如何在 fixed 表格布局中实现单行全宽展开效果-html教程

因此，“为单行实现全宽扩展”的本质不是“覆盖 fixed 布局”，而是绕过单元格宽度限制，用结构化方式达成视觉效果。最佳实践是：

✅ 使用 colspan 创建跨列单元格
为每组可展开内容后插入一个独立

✅ 用 CSS 控制显隐，避免重排开销
推荐使用 display: none/block（而非 visibility: hidden 或 height: 0），既保证语义清晰，又避免 fixed 布局下高度计算异常。

✅ JS 逻辑简洁可靠
通过事件委托或直接绑定，点击目标行时切换下一行的 .hidden 类即可：

  

    
姓名
    
部门
    
入职日期
  
  

    

      

        详细信息：该员工负责前端架构设计，主导了 2024 年组件库重构项目。
      
    
  
  

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');
    }
  });
});

⚠️ 注意事项：