如何使背景延伸到一定宽度的父溢出容器之外

Question

请参阅下面的代码片段。我有一个宽度固定的容器，在这个容器中，有一系列宽度大于父容器的行。我为其中一些行设置了背景，但是，当我向右滚动到行的其余部分时，背景停止了(背景只填充了容器的宽度)。如何使这些行的背景保留到溢出?谢谢。

const Example = () => {
const row = ['John Smith', '2020-10-01', '[e-mail]', '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>

Answer 1

如果你只想在表格中水平滚动，你必须使用两个容器，并根据需要将fit-content应用于内部容器和width(这里是40rem)应用于外部容器

const Example = () => {
const row = ['John Smith', '2020-10-01', '[e-mail]', '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>

如果你说表格单元格比以前更宽，你可以通过减少最里面的width(15rem)或一些边距(05rem)来解决这个问题