My current project is utilizing the Material-ui framework, and I have a situation where numerous anchor elements are being displayed as a table within a Paper component from mui. However, due to the length of this table, it causes a horizontal scroll bar to appear in the mobile view, which is not ideal. I am looking for a solution that would allow me to reduce the width of these table-like anchor elements so that the horizontal scroll bar does not appear, without resorting to using overflow-x: hidden to simply hide the elements.
Here is a simplified version of my code:
class Row extends React.Component {
render() {
const cell = (<a class="linkCell" key={cell.id} href="#"></a>);
const row = [];
for (let i = 0; i < 20; i++) {
row.push(cell);
}
return <div>{Row}</div>
}
}
class WholeTable extends React.Component {
render() {
const row = <Row key={row.id}/>
const table = [];
for (let i = 0; i < 100; i++) {
table.push(row);
}
return <Paper>{table}</Paper>
};
}
Current appearance of the issue (before and after horizontal scrolling): https://i.stack.imgur.com/UowXL.png
https://i.stack.imgur.com/8F2DR.png
I would greatly appreciate any assistance or advice on how to tackle this challenge effectively. Thank you!