jQuery DataTables样式异常求助：已引入必要库但样式失效

云原生阿岚

2026-5-22

嘿，我之前也碰到过DataTables样式异常的情况，虽然你说已经引入了必要库、用了正确语法，但大概率是这几个细节没处理好，我给你列出来排查下：

样式文件加载顺序错误
因为你的表格用了Bootstrap的table、table-bordered这些类，所以CSS加载顺序必须严格：先加载Bootstrap的基础CSS，再加载DataTables的核心CSS，最后加载DataTables适配Bootstrap的主题CSS（比如dataTables.bootstrap4.css）。如果顺序搞反了，两种框架的样式会冲突，导致表格显示异常。
样式/JS文件未正确引入
打开浏览器的开发者工具（F12），切换到Network标签，刷新页面，检查所有DataTables相关的CSS和JS文件是否成功加载（没有404状态码）。有时候路径写错了或者文件没放到指定位置，都会导致样式不生效。
初始化时机不对
如果你在DOM还没完全加载完成时就初始化DataTables，会导致JS无法正确识别表格元素，进而样式无法应用。一定要把初始化代码放在DOM加载完成的回调里：
```
// jQuery版本
$(document).ready(function() {
    $('#testCategory').DataTable();
});

// 原生JS版本
document.addEventListener('DOMContentLoaded', function() {
    new DataTable('#testCategory');
});
```
自定义样式冲突
检查你自己写的CSS有没有优先级过高的规则，覆盖了DataTables的默认样式。比如如果有类似table th { ... }的全局样式，可能会冲掉DataTables的表头样式。可以用开发者工具的Elements标签查看元素的样式继承情况，找出冲突的规则。

给你一个完整的正确示例参考，确保所有资源加载顺序和初始化代码都没问题：

<!-- CSS加载顺序 -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="dataTables.dataTables.min.css">
<link rel="stylesheet" href="dataTables.bootstrap4.min.css">

<h3>List of Categories</h3>
<table id="testCategory" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Category ID</th>
            <th>Category Name</th>
            <th>Created On</th>
            <th>Created By</th>
        </tr>
    </thead>
    <tbody>
        <!-- 这里填充你的数据行 -->
    </tbody>
</table>

<!-- JS加载顺序 -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="dataTables.min.js"></script>
<script src="dataTables.bootstrap4.min.js"></script>

<!-- 初始化 -->
<script>
$(document).ready(function() {
    $('#testCategory').DataTable();
});
</script>

另外别忘了检查浏览器控制台有没有JS报错，比如如果jQuery没加载就用了$，会直接导致DataTables初始化失败，样式自然也出问题。

内容的提问来源于stack exchange，提问作者Wahid Masud