Css 如何在mobile view上禁用水平滚动并缩小元素的大小？

我正在为我的项目使用材质ui。现在，我有很多锚元素显示在mui的

文件
组件中，就像一张表一样。因为这个表格很长，它在移动视图中生成了一个水平滚动条，这不是我想要的。我想知道是否有一种方法可以缩小我所有类似表格的锚元素的宽度，这样水平滚动条就不会出现？（我不想使用
overflow-x:hidden
隐藏元素）

我的代码的简化版本：

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>
    };
}

类行扩展React.Component{
render（）{
常量单元格=（）；
常量行=[]；
for（设i=0；i<20；i++）{
行。推（单元）；
}
返回{Row}
}
}
类WholeTable扩展React.Component{
render（）{
常量行=
常数表=[]；
for（设i=0；i<100；i++）{
表.推送（世界其他地区）；
}
返回{table}
};
}

现在的样子（水平滚动前后）：


任何帮助都将不胜感激！谢谢
在CSS文件中，您只需使用

width: 100vw;

在所有元素中，将其缩小到视口宽度的100%。但是，您必须小心，如果使用任何填充，则必须从宽度中减去这些像素。
谢谢，这样做很好。