javascript - 为什么为我的 DataTables 设置类没有做任何事情？

Question

编辑:

重现问题的 fiddle : https://jsfiddle.net/w8pkjek2/3/ [我第一次使用 fiddle ...让我知道我是否做错了。]

---

我正在尝试向使用 DataTables.net 的表格添加单元格边框。我可以通过我的 dataTable() 调用调整我的表格，但不能使用 css。我的标题中有这段代码:

<script src="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css"></script>
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>

我体内的这段代码:

    <script>
        $(document).ready(function () {
            $('#my-table').dataTable({
                "paging": false,
                "info": false,
                "searching": false
            });
        });
    </script>
    <table id="my-table" class="cell-border" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td>Cell 6</td>
        </tr>
        <tr>
            <td>Cell 7</td>
            <td>Cell 8</td>
            <td>Cell 9</td>
        </tr>
        <tr>
            <td>Cell 10</td>
            <td>Cell 11</td>
            <td>Cell 12</td>
        </tr>
        </tbody>
    </table>

我已经确认我的 paging、info 和 searching 参数正在发挥作用(注释掉那些行使其出现)。我已经确认正在读取我的 jquery.dataTables.min.js 脚本(将其与 paging、info 和 searching 让他们不出现)。

基于此，我假设正在读取 jquery.dataTables.min.css。我的表格有 "cell-border" 类，但我的表格单元格周围没有边框。我也尝试过 "row-border"。

为什么我的表格对 "cell-border" 类的 jquery.dataTables.min.css 没有反应？

Answer 1

尝试将 jquery.dataTables.min.css 作为样式表而不是脚本包含在内。

这对我有用:

<link href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css"  rel="stylesheet">