如何实现HTML表格（DataTable）指定列的折叠/展开功能

1. HTML结构 #

给需要控制的列加上专属类名，方便后续操作：

<table id="topsTable" border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
      <th>列5</th>
      <th>列6</th>
      <!-- 第7列：总计列，作为切换按钮 -->
      <th class="toggle-column">Number of Tops ▶</th>
      <!-- 8-11列：明细列，默认隐藏 -->
      <th class="detail-columns"># Short-sleeve</th>
      <th class="detail-columns"># Long-sleeve</th>
      <th class="detail-columns"># Sweaters</th>
      <th class="detail-columns"># Jackets</th>
      <th>列12</th>
      <th>列13</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
      <td>15</td>
      <td class="detail-columns">5</td>
      <td class="detail-columns">4</td>
      <td class="detail-columns">3</td>
      <td class="detail-columns">3</td>
      <td>数据12</td>
      <td>数据13</td>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
      <td>20</td>
      <td class="detail-columns">7</td>
      <td class="detail-columns">6</td>
      <td class="detail-columns">4</td>
      <td class="detail-columns">3</td>
      <td>数据12</td>
      <td>数据13</td>
    </tr>
  </tbody>
</table>

2. CSS样式 #

用max-width和opacity实现过渡效果（display: none无法添加过渡动画），默认隐藏明细列：

/* 默认隐藏明细列 */
.detail-columns {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  border: none; /* 隐藏边框避免布局跳动 */
}

/* 展开时的样式 */
.detail-columns.active {
  max-width: 200px; /* 设置足够大的宽度值 */
  opacity: 1;
  border: 1px solid #000; /* 恢复边框 */
}

/* 切换表头样式，鼠标 hover 显示手型 */
.toggle-column {
  cursor: pointer;
  user-select: none;
}

3. jQuery逻辑 #

绑定表头点击事件，切换明细列显示状态，同时更新表头箭头图标：

$(document).ready(function() {
  // 绑定第7列表头的点击事件
  $('.toggle-column').on('click', function() {
    // 切换所有明细列的 active 类
    $('.detail-columns').toggleClass('active');
    
    // 更新表头的箭头图标
    const $th = $(this);
    if ($th.text().includes('▶')) {
      $th.text($th.text().replace('▶', '▼'));
    } else {
      $th.text($th.text().replace('▼', '▶'));
    }
  });
});

额外说明 #

• 用max-width替代display: none实现过渡动画，解决了原生display属性无法过渡的问题
• 表头箭头图标用来直观展示当前折叠/展开状态
• 所有操作基于类名选择，不依赖第三方表格插件API，纯HTML+CSS+jQuery实现

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