0

出于某种原因，在我的网站上，我的 jQuery 数据表的列标题没有与行对齐。

这是一个示例： 在此处输入图像描述 请注意，我的一些表格（包括上述表格）位于 Bootstrap 选项卡中。我相信这是原因，因为当它们不在选项卡中时，它们显示得很好。

我知道引导程序认为其他选项卡中的数据“不可见”，所以我认为它与此有关。

有人有简单的css或js修复吗？提前致谢。

编辑，这里有一些代码：

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="<?php echo $tab_1; ?>"><a href="#activeusers"  class="tab-nonwhitetext" aria-controls="activeusers" role="tab" data-toggle="tab">Active Users</a></li>
    <li role="presentation" class="<?php echo $tab_2; ?>"><a href="#inactiveusers"  class="tab-nonwhitetext" aria-controls="inactiveusers" role="tab" data-toggle="tab">Inactive Users</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane <?php echo $tab_1; ?>" id="activeusers">
        <?php echo $table1; ?>
    </div>
    <div role="tabpanel" class="tab-pane <?php echo $tab_2; ?>" id="inactiveusers">
        <?php echo $table2; ?>
    </div>
</div>

<table "border="0" cellpadding="3" cellspacing="20" class="display dataTable new-table-styling dynamic-table" id="table" width="100%">
    <thead>
        <tr>
            <th>First Name</th><th>Last Name</th><th>Job Title/Education</th><th>Room/Phone(s)</th><th>Email/Supervisor</th><th>Employee Type</th><th>Image</th><th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
    </tbody>
</table>
4

1 回答 1

0

确保您的页面具有带 Bootstrap 的 DataTables所需的 js 和 css 文件。如果dataTables.bootstrap.js（和相关的dataTables.bootstrap.css）不包括在内，您的表格将无法正确呈现。

主 DataTables 文件的名称为 jquery.dataTables.js，使用大多数 jQuery 插件通用的格式。对于 DataTables 支持的各种样式库，还有一个样式集成文件，其格式为dataTables.{style}.js（dataTables.bootstrap.js例如 Bootstrap）。

应该包含这两个 Javascript 文件 - 包含基本 DataTables 功能的主文件和为样式库设置默认值的样式文件。

对于 CSS，应该只包含一个文件，因为样式库将为表格提供核心样式选项。CSS 文件具有格式dataTables.{style}.css（dataTables.bootstrap.css例如 Bootstrap）。

于 2016-07-22T19:31:20.327 回答