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

Question

我正在使用 DataTables 在 html 页面中显示我的 json 数据，它可以工作，但是我得到的表没有样式。 (见图)。我尝试添加宽度值等于 80%、100% 等的 css 样式。但没有任何反应。

注意:将json数据显示到datatable是没有错的。我已经做了，只是布局很难看。

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>

我尝试删除数据表 Bootstrap ，但它仍然是一样的。

这是我显示表格的 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>

Answer 1

解决方案:

感谢那些花时间分享意见的人。我意识到我犯了一个愚蠢的错误。我使用的 CDN 导致了错误。我删除了之前使用的所有 DataTabes CDN，并将其替换为:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>