Please see the below code snippet. I have a container with a set width, and in that container, a series of rows who's width is greater than the parent container. I have a background for some of those rows, however, when I scroll to the right to the remaining portion of the rows, the background stops (the background only fills the width of the container). How can I get the background for these rows to persist to the overflow? Thanks.
const Example = () => {
const row = ['John Smith', '2020-10-01', 'jsmith@gmail.com', 'Phoenix', 'Arizona'];
const rows = [row, row, row, row, row];
return (
<div
style={{
background: 'white',
border: '1px solid black',
height: '100%',
margin: '1rem',
overflow: 'auto',
width: '40rem',
}}
>
{rows.map((row: any, index) => (
<div style={{ background: index % 2 === 0 ? 'orange' : 'white', display: 'flex' }}>
{row.map((label: string) => (
<div style={{ margin: '0 5rem', width: '15rem' }}>{label}</div>
))}
</div>
))}
</div>
);
};
ReactDOM.render(<Example />, document.getElementById("react"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>You have to use two containers if you only want horizontal scroll in table only and apply fit-content to inner container and width(here 40rem) according to wish on outer container
const Example = () => {
const row = ['John Smith', '2020-10-01', 'jsmith@gmail.com', 'Phoenix', 'Arizona'];
const rows = [row, row, row, row, row];
return (
<div
style={{
background: 'white',
border: '1px solid black',
height: '100%',
margin: '1rem',
overflow: 'auto',
width: '40rem',
}}
>
{rows.map((row: any, index) => (
<div style={{ background: index % 2 === 0 ? 'orange' : 'white', display: 'flex',width:'fit-content' }}>
{row.map((label: string) => (
<div style={{ margin: '0 5rem', width: '15rem' }}>{label}</div>
))}
</div>
))}
</div>
);
};
ReactDOM.render(<Example />, document.getElementById("react"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>If you say table cells are wider than before than you can solve that out by reducing innermost
width(15rem) or some margins (05rem)