화면에서 오른쪽 경계를 초과하면 HTML 요소가 잘립니다.

Question

테이블을 사용하여 데이터를 표시하는 웹 사이트가 있습니다. 문제는 작은 화면에서 웹 사이트를 볼 때 표가 잘려서 모든 콘텐츠가 표시되지 않는다는 것입니다. 아래에서 볼 수 있듯이, 오른쪽으로 스크롤하는 모든 부분이 화면에 거의 보이지 않고 잘려 있습니다.

나는 부분적으로 루트의 너비 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); 

Answer 1

최소 폭은 테이블이 적어도을 할 일으키는 넓은

폭 같은 간단한 것을 시도하십시오 (700)로 : 100 %;

너비 : 100 %; 사이드 메뉴를 엉망으로 만들 때 메뉴의 너비를 240px 대신 30 %로 설정하는 것이 좋습니다. 귀하의 메뉴가 페이지의 30 %를 차지하고 테이블이 다른 70 %를 차지한다면, 은이 조금 좋아질 것입니다.

실례가없는 추측이긴하지만.