材质UI垂直滚动，列宽

Question

有没有人想出如何获取素材ui next（v.1 +）以垂直滚动，表格标题锁定在顶部。我已经达到了滚动但现在我的列宽不匹配的程度。有人能让我知道我做错了什么吗？我正在尝试获取表头行单元格的宽度以匹配表体行单元格。

样式

const styles = theme => ({
     table: {
        height: "100px",
        borderBottom: "2px solid gray" 
     },
     tableHead: {
        border: "1px solid #d0d0d0",
        height: "25px",
        background: "#f2f2f2",
        display: "block",
     },
     tableHeaderRow: {
        height: "25px",
        width: "100%",
        display: "table",
     },
     tableHeaderCell: {
        border: "1px solid #d0d0d0",
     },
     tableBody: {
        height: "100px", 
        marginTop: "theme.spacing.unit * 3", 
        overflowY: "auto",
        overflowX: "hidden",
        border: "1px solid grey",
        display: "block"
     },
     tableBodyRow: {
        height: "15px",
        borderRight: "2px solid #d0d0d0",
        display: "table",
        width: "100%",
     }

});

表格代码

<Table className={classes.table}>
          <TableHead className={classes.tableHead}>
            <TableRow className={classes.tableHeaderRow}>
              <TableCell className={classes.tableHeaderCell} key={0}>
                table row 1
              </TableCell>
              <TableCell className={classes.tableHeaderCell} key={1}>
                table row 2
              </TableCell>
              <TableCell className={classes.tableHeaderCell} key={2}>
                table row 3
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody className={classes.tableBody}>
            {data.history
              ? data.history.map((iterator, index) => {
                  return (
                    <TableRow
                      key={index}
                      className={classes.tableBodyRow}
                    >
                      <TableCell style={{ border: "1px solid #d0d0d0" }}>
                        Cell 1
                      </TableCell>
                      <TableCell style={{ border: "1px solid #d0d0d0" }}>
                        cell2
                      </TableCell>
                      <TableCell style={{ border: "1px solid #d0d0d0" }}>
                        cell 3
                      </TableCell>
                    </TableRow>
                  );
                })
              : null}
          </TableBody>
        </Table>