Bootstrap 4 table-bordered 失去了它的风格

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>john@example.com</td>
                <td>john@example.com</td>
                <td>john@example.com</td>
                <td>john@example.com</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
                <td>john@example.com</td>
                <td>john@example.com</td>
                <td>john@example.com</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
                <td>john@example.com</td>
                <td>john@example.com</td>
                <td>john@example.com</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 主 css 复制表类，然后将其放在表边框类上。