如何让两个同表头的HTML表格实现列对齐？

核心思路 #

针对Confluence表格自带样式干扰、列宽同步失效的问题，通过统一样式消除干扰 + 动态同步实际渲染宽度 + 联动列隐藏状态三个步骤解决，确保两表格列严格对齐。

实现代码 #

HTML结构 #

将两个表格放入同一容器，保证宽度上下文一致，同时给控制按钮绑定列索引标识：

<div class="table-alignment-container">
  <!-- 带表头和隐藏按钮的控制表格 -->
  <table id="control-table">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="column-toggle-row">
        <td><button data-column="0">隐藏列1</button></td>
        <td><button data-column="1">隐藏列2</button></td>
        <td><button data-column="2">隐藏列3</button></td>
      </tr>
    </tbody>
  </table>

  <!-- Confluence页面表格（保留原有内容，添加统一类名） -->
  <table id="confluence-table" class="confluence-table">
    <thead>
      <tr>
        <th>Confluence列1</th>
        <th>Confluence列2</th>
        <th>Confluence列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>较长的内容2，测试宽度自适应</td>
        <td>内容3</td>
      </tr>
    </tbody>
  </table>
</div>

CSS样式重置 #

消除Confluence自带样式的干扰，统一表格渲染规则：

.table-alignment-container {
  width: 100%;
  overflow-x: auto; /* 处理列过多的横向滚动 */
}

#control-table, #confluence-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框避免宽度偏差 */
  margin-bottom: 10px;
}

#control-table th, #control-table td,
#confluence-table th, #confluence-table td {
  box-sizing: border-box; /* 确保内边距不影响宽度计算 */
  padding: 8px;
  border: 1px solid #ddd;
}

.column-toggle-row button {
  padding: 4px 8px;
  cursor: pointer;
}

/* 强制覆盖Confluence默认表格样式 */
.confluence-table {
  table-layout: auto !important; /* 取消固定布局，允许自适应宽度 */
  margin: 0 !important;
}

JavaScript逻辑 #

实现列宽同步、列隐藏联动：

const controlTable = document.getElementById('control-table');
const confluenceTable = document.getElementById('confluence-table');
const toggleButtons = document.querySelectorAll('.column-toggle-row button');

// 同步两表格列宽的核心函数
function syncColumnWidths() {
  const controlCols = controlTable.querySelectorAll('thead tr th');
  const confluenceCols = confluenceTable.querySelectorAll('thead tr th');

  controlCols.forEach((col, idx) => {
    if (!confluenceCols[idx]) return;
    // 获取控制列的实际渲染宽度
    const width = col.offsetWidth;
    // 同步Confluence表头列宽
    confluenceCols[idx].style.width = `${width}px`;
    // 同步Confluence所有行的对应列宽
    confluenceTable.querySelectorAll(`tbody tr td:nth-child(${idx + 1})`).forEach(td => {
      td.style.width = `${width}px`;
    });
  });
}

// 切换列显示/隐藏并同步状态
function toggleColumn(colIdx) {
  // 切换控制表格列状态
  controlTable.querySelectorAll(`th:nth-child(${colIdx + 1}), td:nth-child(${colIdx + 1})`).forEach(el => {
    el.style.display = el.style.display === 'none' ? '' : 'none';
  });
  // 切换Confluence表格列状态
  confluenceTable.querySelectorAll(`th:nth-child(${colIdx + 1}), td:nth-child(${colIdx + 1})`).forEach(el => {
    el.style.display = el.style.display === 'none' ? '' : 'none';
  });
  // 延迟同步，确保DOM更新完成
  setTimeout(syncColumnWidths, 0);
}

// 绑定按钮点击事件
toggleButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    const colIdx = parseInt(btn.dataset.column);
    toggleColumn(colIdx);
    // 切换按钮文字
    btn.textContent = btn.textContent.includes('隐藏') ? `显示列${colIdx + 1}` : `隐藏列${colIdx + 1}`;
  });
});

// 初始化及窗口 resize 时同步宽度
window.addEventListener('load', syncColumnWidths);
window.addEventListener('resize', syncColumnWidths);

关键说明 #

1. box-sizing: border-box：确保列的内边距、边框不会额外占用宽度，宽度计算更准确
2. offsetWidth：获取列的实际渲染宽度，而非预设CSS宽度，适配内容自适应场景
3. 延迟同步：列隐藏后DOM状态更新需要时间，延迟执行同步避免计算偏差
4. 样式覆盖：强制取消Confluence可能设置的table-layout: fixed，保证宽度能动态调整

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