DataTables插件不喜欢与Bootstrap 4结合使用

Question

所以，我正在建立一个学校项目的网站，需要包括一个可排序的用户系统。

当我制作它时，我认为使用datatables插件使这个过程变得更容易会很好。但是当我将它与Bootstrap 4结合使用时，我的表格并没有伸展出来，我觉得引导程序CSS并没有与它结合使用。

有没有人知道如何让这4个一起工作以使它看起来更好？

这就是网站现在的丑陋程度：

标签的HTML / PHP：

<div class="container">
 <div class="row" id="content">

     <!-- Bovenste text van de site -->
     <div class="col-12">
         <p class="text-center" id="introtext">Hier ziet u een overzicht van alle contactpersonen.</p>
     </div>

     <table id="sortableTable" class="table table-hover">
         <thead>
         <tr>
             <td>Voornaam</td>
             <td>Achternaam</td>
             <td>Email</td>
             <td>Telefoonnummer</td>
             <td>Gebruikersnaam</td>
             <td>Type account</td>
         </tr>
         </thead>
         <tbody>
         <tr>
             <?php

             foreach ($row = mysqli_fetch_row(displayUsers("localhost", "root", "", "adresboek")) as $value
             {
                 echo "<td>{$value}</td>";
             }

             ?>
         </tr>
         </tbody>
     </table>
 </div> </div>

Answer 1

如提供的链接https://datatables.net/examples/styling/bootstrap4中所述。你似乎忘了包括Datatables Bootstrap 4 JS / CSS文件： JS：

https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js

CSS：

https://cdnjs.cloudflare.com/ajax/libs/twitter- 
bootstrap/4.0.0/css/bootstrap.css
https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css

确保您的页面中包含上述自定义JS / CSS Datatables Bootstrap 4。