mui 表没有响应

Question

我正在使用 mui表。它没有响应。我需要以% 为单位设置宽度。

输出是我附加来自两个不同屏幕的屏幕截图

Answer 1

创建一个 div 容器overflow: auto，然后创建另一个容器

和：width: '100%', display: 'table', tableLayout: 'fixed'

就这样。

 <div className="App">
      <Box sx={{ overflow: "auto" }}>
        <Box sx={{ width: "100%", display: "table", tableLayout: "fixed" }}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>
                  <TableSortLabel>Name</TableSortLabel>
                </TableCell>
                <TableCell>
                  <TableSortLabel>User</TableSortLabel>
                </TableCell>
                <TableCell>
                  <TableSortLabel>Title</TableSortLabel>
                </TableCell>
                <TableCell>
                  <TableSortLabel>Role</TableSortLabel>
                </TableCell>
                <TableCell align={"right"}></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              <TableRow hover>
                <TableCell>
                  <Box sx={{ display: "flex", alignItems: "center" }}>
                    <Avatar
                      sx={{
                        height: 42,
                        width: 42,
                        backgroundColor: "primary.main"
                      }}
                    >
                      MD
                    </Avatar>
                    <Box sx={{ ml: 1 }}>
                      <Link
                        color={"inherit"}
                        variant={"subtitle2"}
                        component={"a"}
                        sx={{ cursor: "pointer" }}
                      >
                        Darwling Jackson
                      </Link>
                    </Box>
                  </Box>
                </TableCell>
                <TableCell>DJackson</TableCell>
                <TableCell>Tester</TableCell>
                <TableCell>Editor</TableCell>
              </TableRow>
              <TableRow hover>
                <TableCell>
                  <Box sx={{ display: "flex", alignItems: "center" }}>
                    <Avatar
                      sx={{
                        height: 42,
                        width: 42,
                        backgroundColor: "primary.main"
                      }}
                    >
                      MD
                    </Avatar>
                    <Box sx={{ ml: 1 }}>
                      <Link
                        color={"inherit"}
                        variant={"subtitle2"}
                        sx={{ cursor: "pointer" }}
                      >
                        Jhon Phoneix
                      </Link>
                    </Box>
                  </Box>
                </TableCell>
                <TableCell>JP</TableCell>
                <TableCell>Database Administrator</TableCell>
                <TableCell>Editor</TableCell>
              </TableRow>
              <TableRow hover>
                <TableCell>
                  <Box sx={{ display: "flex", alignItems: "center" }}>
                    <Avatar
                      sx={{
                        height: 42,
                        width: 42,
                        backgroundColor: "primary.main"
                      }}
                    >
                      MD
                    </Avatar>
                    <Box sx={{ ml: 1 }}>
                      <Link
                        color={"inherit"}
                        variant={"subtitle2"}
                        sx={{ cursor: "pointer" }}
                      >
                        Maria Dominguez
                      </Link>
                    </Box>
                  </Box>
                </TableCell>
                <TableCell>MDominguez</TableCell>
                <TableCell>IT Manager</TableCell>
                <TableCell>Editor</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </Box>
      </Box>
    </div>

请参阅我的示例：Mui 响应式代码沙箱