嘿，我完全懂你遇到的困扰——折叠展开的内容被死死限制在标题所在的列里，没法铺满整行展示详细信息对吧？咱们直接来搞定它：

核心思路 #

问题出在你把折叠内容放在了标题所在的<td>单元格里，它自然只能继承该列的宽度。正确的做法是把展开内容放在一个跨所有列的独立表格行中，通过控制这个行的显示/隐藏来实现折叠效果。

具体实现步骤 #

1. 调整HTML结构

给每个可折叠的标题行后面加一个带跨列单元格的行，用来放展开内容：

<!-- 正常/折叠状态的标题行 -->
<tr>
  <td class="expand-trigger">> Title to expand</td>
  <td>x</td>
  <td>✓</td>
</tr>
<!-- 用于展开内容的行，初始隐藏 -->
<tr class="expand-content-row">
  <td colspan="3">
    这里是你要展示的详细内容，现在它能占满整个表格的宽度啦！
  </td>
</tr>

这里的colspan="3"是关键，它让这个单元格横跨表格的3列，实现整行展示。

2. 添加CSS控制显示状态

给展开行设置初始隐藏，点击后切换显示：

.expand-content-row {
  display: none; /* 默认隐藏 */
}
.expand-content-row.active {
  display: table-row; /* 激活时显示为表格行 */
}
/* 可以给展开内容加些样式，让它更美观 */
.expand-content-row td {
  padding: 10px;
  background-color: #f5f5f5;
}

3. 编写JavaScript交互逻辑

给标题添加点击事件，切换对应展开行的显示状态：

// 获取所有标题触发器
const triggers = document.querySelectorAll('.expand-trigger');

triggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    // 找到当前标题行的下一行（就是咱们的展开行）
    const expandRow = trigger.closest('tr').nextElementSibling;
    // 切换active类来控制显示/隐藏
    expandRow.classList.toggle('active');
    // 可以顺便切换标题的箭头，提升交互体验
    trigger.textContent = trigger.textContent.includes('>') ? '▼ Title to expand' : '> Title to expand';
  });
});

额外小贴士 #

• 如果你的表格结构比较复杂（比如有嵌套分组），可以用data-*属性来关联触发器和展开行，比如给触发器加data-target="row-1"，给展开行加id="row-1"，这样即使结构变化也不会出错。
• 可以给展开内容添加过渡动画，比如用max-height配合transition，让折叠/展开更平滑。

内容的提问来源于stack exchange，提问作者ProGrammer