我怎樣才能讓我的桌子在移動設備上響應？

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

你在使用引導程序嗎？ 如果是這樣，您需要一個帶有 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%;
}