如何用纯CSS实现多个AgGrid表格并排且各占全屏宽度？

你可以完全摆脱JS计算父容器宽度的逻辑，用两种更简洁的纯CSS方案实现需求：

方案一：Flex布局 + 固定视口宽度 #

给每个表格容器设置width: 100vw，父容器仅需保留display: flex即可自动扩展宽度容纳所有表格，无需手动计算总宽度：

const App = () => {
  const rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ];
  const tables = [rowData, rowData];

  return (
    <div
      className="ag-theme-alpine"
      style={{
        display: "flex",
        overflowX: "auto" // 可选，添加横向滚动让表格可切换
      }}
    >
      {tables.map((data) => (
        <div style={{ width: "100vw", height: 400 }}>
          <AgGridReact rowData={data}>
            <AgGridColumn field="make" />
            <AgGridColumn field="model" />
            <AgGridColumn field="price" />
          </AgGridReact>
        </div>
      ))}
    </div>
  );
};

方案二：Grid布局（完全纯CSS，无需依赖JS维度计算） #

利用Grid的自动列特性，父容器仅需配置grid-auto-flow: column和grid-auto-columns: 100vw，即可让每个表格自动占据全屏宽度并横向排列，连子元素的宽度都无需手动设置：

const App = () => {
  const rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ];
  const tables = [rowData, rowData];

  return (
    <div
      className="ag-theme-alpine"
      style={{
        display: "grid",
        gridAutoFlow: "column",
        gridAutoColumns: "100vw",
        overflowX: "auto" // 可选，添加横向滚动
      }}
    >
      {tables.map((data) => (
        <div style={{ height: 400 }}>
          <AgGridReact rowData={data}>
            <AgGridColumn field="make" />
            <AgGridColumn field="model" />
            <AgGridColumn field="price" />
          </AgGridReact>
        </div>
      ))}
    </div>
  );
};

方案优势 #

• 完全脱离JS对表格数量的依赖，无论表格数量如何变化，CSS都会自动适配布局
• 代码更简洁易维护，避免了${tables.length}00%这种耦合性强的动态样式计算
• 保留了原需求中每个表格占满全屏宽度的效果，同时支持横向滚动切换表格

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