我怎样才能让我的桌子在移动设备上响应？

Question

我正在尝试使我的表格具有响应性，但我有一个 Marge。我把表格设置为响应式，但即使这样它也不起作用。

我在另一个页面上做了同样的事情，它可以工作。不适合这个，奇怪！

<Container className='dataContainer' fluid>
      <Row>
        <Col>
        <h3>Base de données client</h3>
        </Col>
        </Row>
        <Row >
        <Table class="table-responsive" striped hover>
        <thead>
      <tr>
        <th>Nom</th>
        <th>Prenom</th>
        <th>Mail</th>
        <th>Numero</th>
        <th>Age</th>
      </tr>
      </thead>
      <tbody>
        {this.display()}
        </tbody>
        </Table>
     </Row>
       
      
</Container>

Answer 1

你在使用 Bootstrap 吗？如果是这样，您需要一个带有 class="table-responsive" 的表格标签周围的 div。

像这样：

<div class="table-responsive">
<table class="table">
</table>
</div>

Css 看起来像这样：

.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.table{
width: 100%;
}