CSS 响应表未显示

Question

我想在这里创建一个响应表: http://websunweaved.com/mikes-cutco-discount-price-list/

我正在关注此页面: https://css-tricks.com/responsive-data-tables/

我的 CSS 和表格在文本模块中 - 在页面源中搜索“et_pb_text_inner”。

一定是有什么东西阻止了它格式化，因为它可以自己工作。

我已经尝试将 CSS 放入 Divi 主题选项 --> 自定义 CSS，但它的格式仍然不正确。

如有任何见解，我们将不胜感激。谢谢!

Answer 1

要实现完全响应的表格，必须使用“datatalbe”

HTML代码:

<div class="table-responsive">
                        <!-- Table -->
                        <table id="listaRoles" class="table table-bordered table-striped table-hover dataTable js-exportable">
                            <thead>
                            <tr>
                                <th>Names</th>
                                <th>Surnames</th>
                            </tr>
                            </thead>
                            <tbody >
                            </tbody>
                        </table>
                        <!-- #END# Table -->
                    </div>

所需脚本:

<!-- Jquery DataTable Plugin Js -->
<script src="/plugins/jquery-datatable/jquery.dataTables.js"></script>
<script src="/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
<script src="/plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js"></script>
<script src="/plugins/jquery-datatable/extensions/export/buttons.flash.min.js"></script>
<script src="/plugins/jquery-datatable/extensions/export/jszip.min.js"></script>
<script src="/plugins/jquery-datatable/extensions/export/pdfmake.min.js"></script>
<script src="/plugins/jquery-datatable/extensions/export/vfs_fonts.js"></script>
<script src="/plugins/jquery-datatable/extensions/export/buttons.html5.min.js"></script>
<script src="/plugins/jquery-datatable/extensions/export/buttons.print.min.js"></script>

CSS:

<link href="/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet">