Material-UI：选项卡不响应内部数据表

Question

I use the Simple Tabs from Material-UI and I have one Tab how contain a Datatable ( React-Data_Table ) and this tab is not responsive like other when the table is full

Empty

Full

The code

<Grid item xs={12}>
    <Paper className={classes.paper}>
        <AppBar position="static" className={classes.appBar}>
            <Tabs value={value} onChange={handleChange} classes={{ indicator: classes.indicator }} variant="fullWidth">
                <Tab label="Tableau" {...a11yProps(0)} />
                <Tab label="Graphique" {...a11yProps(1)} />
                <Tab label="Carte" {...a11yProps(2)} />
            </Tabs>
        </AppBar>
        <TabPanel value={value} index={0}>
            <Table sections={props.sections}/>
        </TabPanel>
        <TabPanel value={value} index={1}>
            <Graph />
        </TabPanel>
        <TabPanel value={value} index={2}>
            <AppMap />
        </TabPanel>
    </Paper>
</Grid>

I don't know how to fix this except maybe make a CSS to change width with size screen

Thanks for the help

Answer 1

If the child element is exceeding it's parent's size(container element) I would recommend to try using max-width to ensure the width doesn't pass a certain limit.