超出屏幕右边界时 HTML 元素被截断答案

【问题标题】：HTML element is cut off when exceeding right boundary on screen超出屏幕右边界时 HTML 元素被截断
【发布时间】：2018-05-11 16:15:57
【问题描述】：

我有一个网站，我使用表格来显示一些数据。问题是当我在较小的屏幕上查看网站时，表格被截断，并没有显示所有内容。您可以在下面看到，尽管我一直向右滚动，但最右侧的字段几乎不可见并被屏幕截断。

我似乎可以通过根中的宽度 css 参数部分解决此问题，但如果我将宽度设置得太高，只会增加不必要的右边距。

import React  from 'react';
import {ListUsersTableRow} from "./listUserTableRow";
import { withStyles } from 'material-ui/styles';
import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
import Paper from 'material-ui/Paper';

const styles = theme => ({
  root: {
    [theme.breakpoints.up('md')]: {
      width: `calc(100% - 140px)`,
    },
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});

export const ListUsersTable = (props) => {
  const { classes } = props;
  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Edit</TableCell>
            <TableCell>Full name</TableCell>
            <TableCell>Username</TableCell>
            <TableCell>Email</TableCell>
            <TableCell>Company</TableCell>
            <TableCell>Contact Number</TableCell>
            <TableCell>Role</TableCell>
            <TableCell>Status</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.users.map(user => <ListUsersTableRow key={user.id} {...user} toggleEdit={props.toggleEdit}/>)}
        </TableBody>
      </Table>
    </Paper>
  )
};

export default withStyles(styles)(ListUsersTable);

【问题讨论】：

左边的菜单是画布外的菜单吗？似乎打开的菜单将页面推出视图。（如果是，这是预期的行为）
是的，它确实推出了内容。但是，如果我将宽度设置为 100%-240px（抽屉的宽度），我会在右侧得到一个很大的间隙
菜单中是否有任何 CSS 规则会影响内容的正文或某些包装元素？它可能会添加 padding-left。以前从未使用过 100%-xxx 计算，因此不知道它是否应该工作。
我想这是因为你有一个table{minWidth: 700}，不管你发布一个工作的sn-p会更好
当然，你能指出我支持 3rd 方 npm 包（如材料设计）的 sn-p 工具的方向吗？

标签： html css reactjs material-design material-ui

【解决方案1】：

min-width 导致您的表格至少宽至 700。

尝试一些简单的东西，比如 width: 100%;

如果宽度：100%；弄乱您的侧边菜单，您可能需要考虑将菜单的宽度设置为 30% 而不是 240 像素。由于您的菜单占据了页面的 30%，而您的餐桌占据了另外 70%，因此应该更合适一些。

不过，没有实际示例的粗略猜测。

【讨论】：

谢谢，30% 的菜单宽度在大屏幕上可能看起来很有趣。有没有什么好的工具可以在浏览器中显示一个工作示例？
我个人只使用 Chrome 开发工具。如果您右键单击您的页面，请在您要修改的元素上单击“检查”。您的代码应显示在“元素”下。您无法在此处进行永久性代码更改，但您可以篡改现有代码并查看内容是否适合。例如，您应该能够右键单击，检查您的表格，然后在网页上输入您的尺寸并立即反馈