mui 表没有响应答案

【问题标题】：mui table is not responsivemui 表没有响应
【发布时间】：2022-10-07 08:20:48
【问题描述】：

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

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

【问题讨论】：

如果你想要一个真正的答案，你应该发布你的代码。您应该让 MUI 处理宽度，只需将样式道具添加到您的表格：<Table sx={{ minWidth: 650 }}>。

标签： reactjs bootstrap-4 material-ui

【解决方案1】：

没有代码无法真正演示，但是如果您不想让 Material UI 确定宽度，一种常见的策略是将组件包装在 Box 中，并将宽度（以百分比为单位）赋予 Box . Reference。

【讨论】：

【解决方案2】：

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

与：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 responsive code sandbox

【讨论】：