Bootstrap 4以表格为界，失去了它的风格

Question

我的页面中有一个模态，其中有一个表格。当我把表转为表格边界时，它失去了引导风格，并转向正常的html表格！

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Customer Modal -->
<div class="modal" style="text-align: center;" tabindex="-1" role="dialog" id="customerModal">
  <div class="modal-dialog" style="max-width:100%; width:auto !important; display: inline-block;" role="document">
    <div class="modal-content">

      <div class="modal-body">
        <div class=" justify-content-center ml-auto">
          <div id="custom-search-input">
            <div class="input-group col-md-12">
              <input type="text" class="form-control" placeholder="جستجو ..." />
              <i class="fas fa-search"></i>
            </div>
          </div>
        </div>

        <div class="container modal-table">
          <table class="table-bordered">
            <thead class="thead-light">
              <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Address</th>
                <th>Email</th>
                <th>Email</th>
                <th>Email</th>

              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Doe</td>
                <td>[email protected]</td>
                <td>[email protected]</td>
                <td>[email protected]</td>
                <td>[email protected]</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>[email protected]</td>
                <td>[email protected]</td>
                <td>[email protected]</td>
                <td>[email protected]</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>[email protected]</td>
                <td>[email protected]</td>
                <td>[email protected]</td>
                <td>[email protected]</td>

              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">exit</button>
      </div>
    </div>
  </div>
</div>

我甚至不能使用任何CSS作为我的表，它不会改变。我想创建一个带边框但具有引导样式的表。只有当它的class:"table"它看起来与引导风格

Answer 1

从bootstrap main css复制表类，然后将它放在以表格为边界的类上。