如何设置表格除首列外所有单元格宽度一致（table-layout:fixed无效）

针对你遇到的table-layout: fixed未达预期的问题，提供两种可行方案：

方案一：JavaScript动态匹配（精准同步Transgender列宽度） #

这种方式会自动获取Transgender列的实际宽度，再同步到其他列，无需手动估算宽度：

<table class="tg">
  <!-- 你的原有表格HTML代码 -->
</table>

<script>
// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取Transgender列第一个单元格的实际宽度
  const transCell = document.querySelector('.tg tbody tr:nth-child(1) td:nth-child(4)');
  const targetWidth = transCell.offsetWidth;
  
  // 选中除第一列外的所有单元格（包括表头）
  const cellsToAdjust = document.querySelectorAll('.tg td:not(:first-child), .tg th:not(:first-child)');
  
  // 统一设置宽度及约束
  cellsToAdjust.forEach(cell => {
    cell.style.width = `${targetWidth}px`;
    cell.style.minWidth = `${targetWidth}px`;
    cell.style.maxWidth = `${targetWidth}px`;
    cell.style.boxSizing = 'border-box'; // 避免内边距影响宽度
  });
  
  // 启用固定布局确保宽度生效
  document.querySelector('.tg').style.tableLayout = 'fixed';
});
</script>

方案二：纯CSS固定宽度（已知Transgender列宽度时使用） #

如果你已经明确Transgender列的理想宽度（比如根据内容确定为80px），可以直接用CSS硬编码：

.tg {
  table-layout: fixed;
  width: 100%; /* 可选，让表格占满容器宽度 */
  border-collapse: collapse; /* 可选，合并边框更美观 */
}

/* 第一列单独设置宽度（自适应或固定值） */
.tg td:first-child, .tg th:first-child {
  width: auto; /* 也可以设固定值，比如150px */
  text-align: left;
}

/* 其他列统一匹配Transgender列宽度 */
.tg td:not(:first-child), .tg th:not(:first-child) {
  width: 80px; /* 替换为Transgender列的实际宽度 */
  text-align: center;
  box-sizing: border-box;
}

关键说明 #

• table-layout: fixed需要配合明确的列宽设置才会生效，之前未达预期大概率是因为未给目标列指定统一宽度
• JS方案更灵活，适合内容动态变化的场景；CSS方案更简洁，适合静态表格
• 如果内容过长导致溢出，可添加overflow: hidden; text-overflow: ellipsis; white-space: nowrap;处理

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