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>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

从引导主CSS复制表类，然后将其放在表边界类中。