列表宽度与行上方不匹配

Question

当前，我正在处理一个表，其中THead包含所有列名，并且运行良好。但是，它下面的列却没有。他们没有使用完整的表格，因为我在行周围使用了边框。即使不需要，第一行也会使用所有空间。我在两者上都使用数字，但是，这显然只影响顶部。

<TableHead>
          <TableRow >
            <TableCell >Used For</TableCell>
            <TableCell numeric >URL</TableCell>
            <TableCell numeric >User</TableCell>
          </TableRow>
        </TableHead>


            <TableBody  displayRowCheckbox={false}>

              {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(data => {
                return (
                    <div className={classes.body}>                  
                            <TableRow  className={classes.row}>
                            <Typography
                            // variant="body2" 
                            className={classes.titleFont}
                            >
                            {data.title}
                            </Typography>
                            </TableRow>
                            <TableRow className={classes.row}>
                            <TableCell>{data.usedfor}</TableCell>
                            <TableCell numeric>{data.url}</TableCell>
                            <TableCell  numeric>{data.username}12</TableCell>
                          </TableRow>


 body:{

    height: 'auto !important',

 },
 row:{
  borderWidth: "3px",
  borderStyle: 'solid',
  borderColor: "black",


  display: 'flex',


 },