React自定义Table组件中如何设置单列宽度？

你遇到的问题根源在于grid容器的grid-auto-columns: minmax(0, 1fr)规则——这个设置会强制所有列平分可用空间，直接覆盖了你给单元格设置的width属性，所以不管怎么设都没效果。

继续用Grid布局的修复方案 #

不用放弃Grid，只需要把固定的自动列规则改成动态生成列宽模板：

1. 调整列定义结构：给每列的配置添加width字段（比如{ key: 'id', width: '75px' }，需要自适应的列可以设为1fr）
2. 动态生成grid-template-columns值：在组件中根据列定义拼接出列宽字符串，传给Grid容器
3. 移除单元格的width设置：让Grid容器的列宽规则直接控制单元格宽度

修改后的代码示例：

React组件部分

// 先计算列宽模板
const columnWidths = getTemplateColumns().map(col => col.width || '1fr').join(' ');

return (
  <div className={styles.main} style={style}>
    {/* 给header设置动态grid模板列 */}
    <header style={{ gridTemplateColumns: columnWidths }}>
      {getTemplateColumns().map(item => <div>{getHeaderCell(item)}</div>)}
    </header>

    <div className={styles.table}>
      {rows.map((row, rowIdx) => {
        return (
          {/* 给每个row也设置相同的grid模板列 */}
          <div className={styles.row} style={{ gridTemplateColumns: columnWidths }}>
            {getTemplateColumns().map(item => 
              <div className={styles.cell}>{getTableCell(item, rowIdx)}</div>)
            }
          </div>
        )
      })}
    </div>
  </div>
);

SCSS部分（移除自动列规则）

.main {
  width: 100%;

  header {
    display: grid;
    grid-auto-flow: column; // 保留列流方向，去掉grid-auto-columns
    
    div {
      padding: 5px;
      margin-left: unset;
    }
  }

  .table {
    .row {
      display: grid;
      grid-auto-flow: column; // 同样去掉grid-auto-columns
      height: fit-content;
      align-items: center;
      
      .cell {
        padding: 2px 5px;
      }
    }
  } 
}

要不要改用原生Table标签？ #

如果你的表格需要严格的列宽对齐、原生表格的交互兼容性（比如筛选、排序插件）、屏幕阅读器支持，原生<table>、<tr>、<td>是更省心的选择：

• 原生Table自带列同步机制，thead和tbody的列会自动对齐
• 设置table-layout: fixed后，th/td的width会完全生效，不会被内容撑开（除非内容强制换行）
• 无需手动维护Grid容器的列宽模板，代码更简洁

总结 #

• 坚持用Grid：通过动态生成grid-template-columns就能实现自定义列宽
• 追求效率：原生Table在列宽控制和兼容性上更成熟，适合大多数表格场景

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