jquery - 从DataTable生成的表没有布局样式

我正在使用DataTables在html页面中显示我的json数据，但是它可以工作，但是我得到的表没有样式。 （参见图片）。我尝试添加宽度值等于80％，100％等的CSS样式。但是什么也没发生。

注意：将json数据显示到数据表没有任何问题。除了布局难看之外，我已经做到了。

enter image description here

这些是我的头文件中的CDN：
 
    

<!--Ajax CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--script src="/js/jquery.min.js"></script-->

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<!-- Data Tables -->
<script src="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>

我尝试删除了datatables引导程序，但还是一样。

这是显示表的HTML代码：

<div>
        <table class="table table-bordered" id="subjects_table">
            <thead class="thead-dark">
            <tr>
                <th>Code</th>
                <th>Offer #</th>
                <th>Description</th>
                <th>Units</th>
            </tr>
            </thead>
        </table>
    </div>

最佳答案

请添加此CDN

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>