Bootstrap表没有响应，为什么？

Question

我正在使用Bootstrap 4向我的网页添加表格，并试图使其在手机上响应。不幸的是，所有发生的事情是表格被非常缩小，根本没有响应。如何使该表具有响应性，以便在电话上使该表更加缩小/可读？

这是我的表格代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col"></div>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-11 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Setup Table</h1>
      </div>

      <div class="table-responsive table-hover">
        <table class="table table-striped" id="setup-table">
          <thead>
            <tr>
              <th scope="col">Column1</th>
              <th scope="col">Column2</th>
              <th scope="col">Column3</th>
              <th scope="col">Column4</th>
              <th scope="col">Column5</th>
            </tr>
          </thead>
          <tbody>
            <div class="row text-center" style="display:flex; flex-wrap:wrap;">
              <tr>
                <th scope="row">some value</th>
                <td>some value</td>
                <td>some value</td>
                <td>some value</td>
                <td>some value</td>
              </tr>
            </div>
          </tbody>
        </table>
      </div>
    </main>
    <div class="col"></div>
  </div>
</div>

是因为我的桌子在容器中吗？

编辑：

这是我的表格在手机视图上的外观：

Answer 1

您已在标头添加元响应

<meta name="viewport" content= "width=device-width, initial-scale=1.0"> 

Answer 2

该表已经响应。如果您希望它更具“可读性”，只需在表中添加一个水平滚动条即可。