html - Bootstrap 表中的额外列

Question

为什么表格中多了一列？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <center>
    <a href="./" class="btn btn-primary">
      <i class="far fa-hand-point-left"></i> Back
    </a>
    <br /><br />
    <table class="table table-striped table-hover table-bordered table-responsive">
      <thead>
        <tr>
          <th>Sr.</th>
          <th>Name</th>
          <th>Contact</th>
          <th>City</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>
            Name</td>
          <td>Email Id (Mobile Number)</td>
          <td>City</td>
          <td><button class="btn btn-large btn-primary" disabled>Waiting for Directory</button></td>
        </tr>

        <tr>
          <td>2</td>
          <td>
            Name</td>
          <td>Email Id (Mobile Number)</td>
          <td>City</td>
          <td><a href="?ua=trial" class="btn btn-large" style="background-color: red;color: white;">Block</a></td>
        </tr>

      </tbody>
    </table>

  </center>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

为什么表格中多了一列？ see image

还有，为什么屏幕小的时候有滚动条？ (它应该随着屏幕自行调整，因为我正在使用 table-responsive。)

Answer 1

将 .table-responsive 类添加到父级。不在 table 上

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