解决Ant Design表格嵌套时列宽不同步的问题

问题背景

在使用Ant Design的Table组件时，开发者经常会遇到需要嵌套表格的场景。然而，当主表格和嵌套表格同时存在时，它们的列宽往往无法自动同步对齐，这会导致视觉上的不协调和用户体验的下降。

问题分析

通过观察可以发现，当嵌套表格不显示表头(showHeader={false})时，列宽同步问题尤为明显。这是因为：

1. 主表格和嵌套表格的列宽计算机制是独立的
2. 表格的列宽默认采用自适应策略
3. 表头的存在与否会影响表格的布局计算

解决方案

要解决这个问题，我们需要手动控制表格的列宽。以下是几种有效的解决方案：

方法一：固定列宽

通过为所有列设置固定的width属性，可以确保主表格和嵌套表格的列宽一致：

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 200, // 固定宽度
  },
  // 其他列...
];

方法二：使用CSS控制

通过CSS样式强制控制表格单元格的宽度：

.ant-table-cell {
  min-width: 150px !important;
  max-width: 150px !important;
}

方法三：动态计算列宽

在组件渲染时动态计算并设置列宽：

useEffect(() => {
  const headerCells = document.querySelectorAll('.ant-table-thead th');
  const bodyCells = document.querySelectorAll('.ant-table-tbody td');
  
  headerCells.forEach((cell, index) => {
    const width = cell.offsetWidth;
    bodyCells[index].style.width = `${width}px`;
  });
}, []);

最佳实践

在实际项目中，推荐结合使用固定列宽和响应式设计：

1. 为关键列设置固定宽度
2. 为次要列设置最小宽度
3. 使用媒体查询在不同屏幕尺寸下调整列宽
4. 考虑使用Ant Design的resizable属性实现可拖拽调整列宽

总结

Ant Design表格嵌套时的列宽同步问题是一个常见的UI挑战。通过理解表格布局机制并采用适当的解决方案，开发者可以创建出视觉一致、用户体验良好的嵌套表格界面。在实际项目中，应根据具体需求选择合适的解决方案，必要时可以结合多种方法来实现最佳效果。