Consulte el fragmento de código siguiente. Tengo un contenedor con un ancho establecido, y en ese contenedor, una serie de filas cuyo ancho es mayor que el contenedor principal. Tengo un fondo para algunas de esas filas, sin embargo, cuando me desplazo hacia la derecha a la parte restante de las filas, el fondo se detiene (el fondo solo llena el ancho del contenedor). ¿Cómo puedo hacer que el fondo de estas filas persista hasta el desbordamiento? Gracias.
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>Debe usar dos contenedores si solo desea desplazamiento horizontal solo en la tabla y aplicar fit-content al contenedor interno y width (aquí 40rem ) de acuerdo con el deseo en el contenedor externo
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>Si dice que las celdas de la tabla son más anchas que antes, puede resolverlo reduciendo el
widthmás interno (15rem) o algunos márgenes (05rem)