如何创建一行中包含多行的表（材质UI/CSS）

我有这样的数组：

const sample = [
  { name: 'apple', detail: [{'a', 'b'}]},
  { name: 'banana', detail: [{'a', 'b'}]},
];

假设我要创建一个类似于以下附件的表：

那是桌子的主体部分，我把所有的细节都放在里面了。它按照我的预期创建了一张桌子，但是它的尺寸非常窄，而且与桌子的头部不匹配

我想知道是否有一种聪明的方法让将多个数据映射到一行并嵌入到一个表单元格中。

---

名称部分（苹果和香蕉）必须是第一个具有第span行的表格单元格。

您可以在

表格单元格上使用第span行。只需将其赋值为
detail.length+1

在这里，尝试一下：

import React, { Fragment } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing(3),
    overflowX: "auto"
  },
  table: {
    minWidth: 700
  }
}));

const sample = [
  { name: "apple", detail: ["a", "b", "c", "d"] },
  { name: "banana", detail: ["a", "b"] }
];

export default function SpanningTable() {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Fruit</TableCell>
            <TableCell align="right">Buyers</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {sample.map(item => (
            <Fragment>
              <TableRow>
                <TableCell rowSpan={item.detail.length + 1}>
                  {item.name}
                </TableCell>
              </TableRow>
              {item.detail.map(detail => (
                <TableRow>
                  <TableCell>{detail}</TableCell>
                </TableRow>
              ))}
            </Fragment>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

import React，{Fragment}来自“React”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
const useStyles=makeStyles（主题=>({
根目录：{
宽度：“100%”，
marginTop：主题。间距（3），
overflowX：“自动”
},
表:{
最小宽度：700
}
}));
常量样本=[
{名称：“苹果”，细节：[“a”、“b”、“c”、“d”}，
{名称：“香蕉”，详情：[“a”，“b”]}
];
导出默认函数SpanningTable（）{
const classes=useStyles（）；
返回(
果
买主
{sample.map（项=>(
{item.name}
{item.detail.map（detail=>(
{detail}
))}
))}
);
}


这是给你裁判的演示

如果只有一个项目而不是很多的w少行，则会出现问题。。。显示一个空白区域