如何禁用水平滚动并缩小移动视图中元素的大小？

Question

我正在为项目使用 Material-ui 。现在我有很多锚元素显示为来自mui的Paper组件中的表格。因为这个表很长，所以它在移动视图中生成一个水平滚动条，这不是我想要的。我想知道有没有办法缩小我所有类似于桌子的锚元素的宽度，以便不会出现水平滚动条？ （我不想使用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>
    };
}

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

任何帮助将不胜感激！谢谢

Answer 1

在CSS文件中，您只需使用

即可

width: 100vw;

在所有元素中，将它们缩小到视口宽度的100％。但是，你必须要小心，如果你使用任何填充，你将不得不从宽度中减去这些像素。