画面の右端を超えるとHTML要素が途切れます

Question

私はテーブルを使ってデータを表示するウェブサイトを持っています。問題は、私が小さな画面でウェブサイトを見ると、テーブルが切り捨てられ、すべてのコンテンツが表示されないということです。私が右にスクロールしているにもかかわらず、最も右のフィールドはほとんど目に見えず、画面で切り取られていることがわかります。

これは部分的にはrootのwidth cssパラメータで修正できるようですが、幅をあまりに大きく設定すると余分な余白が追加されます。最小幅は、あなたのテーブルを同じ幅700

は、幅のような単純なもの試しとして少なくともことを引き起こしている

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); 

Answer 1

：100％;

幅：100％;あなたのサイドメニューを混乱させるならば、例えば240pxではなく30％のようなものにメニューの幅を設定することが考えられます。あなたのメニューがページの30％を占め、あなたのテーブルが他の70％を占めていると、はがやや良くなるはずです。

しかし、実際の例はありません。