如何修复 Datatables css 不适用于 Datatables？答案

【问题标题】：How to fix Datatables css not applying on Datatables?如何修复 Datatables css 不适用于 Datatables？
【发布时间】：2019-02-28 18:12:12
【问题描述】：

我一直在尝试包含来自 datatables.net 的数据表，它工作正常，分页、排序和搜索栏工作正常，但数据表 css 文件不适用于数据表（它看起来陈旧且不时尚，不是它在 datatables.net 中的样子）我使用 tabler.io 作为我的 web 应用程序的模板，它使用 Bootstrap 4.3.1。

这些是我正在使用的 css 和 js 文件：

<link href="{{ asset('css/app.css') }}" rel="stylesheet"> //bootstrap 4.3.1
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

【问题讨论】：

标签： html css twitter-bootstrap datatables

【解决方案1】：

您可以使用Datatables Theme Creator 添加自定义样式。

在页面顶部选择您的样式选项
点击“创建样式表”
点击页面底部的“CSS”标签，将其复制并粘贴到您的 CSS 文件中。

我发现主题创建者使用起来有些烦人。我发现更有用的是它输出的 CSS，您可以复制并粘贴到您的 CSS 文件中，可以根据您的特定需求进行操作。

虽然输出了很多 CSS，所以这可能是个问题。我建议将它放在你的 CSS 文件的底部，这样它就不会妨碍你的其他具有 350 多行样式的 CSS。

【讨论】：

我不明白，我是否将其复制到引导 css 文件的底部？如果您说的是 app.css，那么这就是引导本地文件。
您使用哪个 .css 文件将正常样式应用于您的页面？假设您想让一些文本更大或将其与页面中心对齐？看起来可能是 css/app.css'？
我通常通过 CDN 加载引导程序（就像您对数据表所做的那样），并为我自己的 css 样式设置一个单独的 .css 文件（如您的 app.css）。对你来说，它看起来像：stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/…">
评论不断删除完整的 CDN，但您可以在这里找到它 getbootstrap.com/docs/4.3/getting-started/introduction
对不起，但我的意思是我的项目中的 app.css 包含引导程序，我使用的 UI 模板（tabler）显然将引导程序保持在本地，app.css 不是我的自定义 css 文件我保留我的自定义样式。