1

使用 dataTables 启用水平滚动并使用 bootstrap 2.3.2 会导致标题和数据列对齐不同步 - dataTables 使用两个单独的表来提供水平滚动。

请参阅此示例：HTML：

<html>
<body>
<div class="container">
    <div class="row">
        <div class="span12">
            <table id="teamTable" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Team Member</th>
                        <th>Balancing Team &amp; Individual Priorities</th>
                        <th>Conscientiousness</th>
                        <th>Relating to Others</th>
                        <th>Preference for Teamwork</th>
                        <th>Problem Solving</th>
                        <th>Effort</th>
                        <th>Relying on Others</th>
                        <th>Balancing Work Tasks &amp; Relationships</th>
                        <th>Work Life Balance</th>
                        <th>Assertiveness</th>
                        <th>Time Urgency</th>
                        <th>Pacing Style</th>
                        <th>Resolving Conflict</th>
                        <th>Avoiding Judgement</th>
                        <th>Seeking Approval</th>
                        <th>Learning</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    <tr>
                        <td>Alexandra Slater</td>
                        <td><p><a href="#">Team Focus</a></p></td>
                        <td><p><a href="#">Preparer</a></p></td>
                        <td><p><a href="#">Relationship Prioritizer</a></p></td>
                        <td><p><a href="#">Balanced Worker</a></p></td>
                        <td><p><a href="#">Enthusiastic Theorist</a></p></td>
                        <td><p><a href="#">Marathon Runner</a></p></td>
                        <td><p><a href="#">Three Musketeer</a></p></td>
                        <td><p><a href="#">Relationship Builder</a></p></td>
                        <td><p><a href="#">Work-Life Balancer</a></p></td>
                        <td><p><a href="#">Behind The Scenes</a></p></td>
                        <td><p><a href="#">Measured Progresser</a></p></td>
                        <td><p><a href="#">Last Minute</a></p></td>
                        <td><p><a href="#">Adaptor</a></p></td>
                        <td><p><a href="#">Hidden Light</a></p></td>
                        <td><p><a href="#">Diamond</a></p></td>
                        <td><p><a href="#">Eternal Student</a></p></td>
                    </tr>
                    <tr>
                        <td>MIKE FEENEY</td>
                        <td><p><a href="#">Team Balancer</a></p></td>
                        <td><p><a href="#">Work Horse</a></p></td>
                        <td><p><a href="#">Relationship Prioritizer</a></p></td>
                        <td><p><a href="#">Balanced Worker</a></p></td>
                        <td><p><a href="#">Enthusiastic Theorist</a></p></td>
                        <td><p><a href="#">Marathon Runner</a></p></td>
                        <td><p><a href="#">Independent</a></p></td>
                        <td><p><a href="#">Relationship Builder</a></p></td>
                        <td><p><a href="#">Work-Life Balancer</a></p></td>
                        <td><p><a href="#">Part of the Cast</a></p></td>
                        <td><p><a href="#">Sprinter</a></p></td>
                        <td><p><a href="#">Last Minute</a></p></td>
                        <td><p><a href="#">Persuader</a></p></td>
                        <td><p><a href="#">Revealer</a></p></td>
                        <td><p><a href="#">Sparkler</a></p></td>
                        <td><p><a href="#">Eternal Student</a></p></td>
                    </tr>
                    <tr>
                        <td>Gary Crowe</td>
                        <td><p><a href="#">Team Balancer</a></p></td>
                        <td><p><a href="#">Preparer</a></p></td>
                        <td><p><a href="#">Relationship Prioritizer</a></p></td>
                        <td><p><a href="#">Team Player</a></p></td>
                        <td><p><a href="#">Enthusiastic Theorist</a></p></td>
                        <td><p><a href="#">Marathon Runner</a></p></td>
                        <td><p><a href="#">Double Checker</a></p></td>
                        <td><p><a href="#">Relationship Builder</a></p></td>
                        <td><p><a href="#">Work-Life Balancer</a></p></td>
                        <td><p><a href="#">Part of the Cast</a></p></td>
                        <td><p><a href="#">Measured Progresser</a></p></td>
                        <td><p><a href="#">Steady</a></p></td>
                        <td><p><a href="#">Adaptor</a></p></td>
                        <td><p><a href="#">Revealer</a></p></td>
                        <td><p><a href="#">Sparkler</a></p></td>
                        <td><p><a href="#">Eternal Student</a></p></td>
                    </tr>
                    <tr>
                        <td>Josh Rammell</td>
                        <td><p><a href="#">Team Focus</a></p></td>
                        <td><p><a href="#">Preparer</a></p></td>
                        <td><p><a href="#">Go with the Flow</a></p></td>
                        <td><p><a href="#">Team Player</a></p></td>
                        <td><p><a href="#">Enthusiastic Theorist</a></p></td>
                        <td><p><a href="#">Marathon Runner</a></p></td>
                        <td><p><a href="#">Double Checker</a></p></td>
                        <td><p><a href="#">Relationship Builder</a></p></td>
                        <td><p><a href="#">Work-Life Balancer</a></p></td>
                        <td><p><a href="#">Behind The Scenes</a></p></td>
                        <td><p><a href="#">Measured Progresser</a></p></td>
                        <td><p><a href="#">Last Minute</a></p></td>
                        <td><p><a href="#">Persuader</a></p></td>
                        <td><p><a href="#">Revealer</a></p></td>
                        <td><p><a href="#">Diamond</a></p></td>
                        <td><p><a href="#">Eternal Student</a></p></td>
                    </tr>
                    <tr>
                        <td>Luke Uijtenhaak</td>
                        <td><p><a href="#">Team Focus</a></p></td>
                        <td><p><a href="#">Preparer</a></p></td>
                        <td><p><a href="#">Relationship Prioritizer</a></p></td>
                        <td><p><a href="#">Team Player</a></p></td>
                        <td><p><a href="#">Reluctant Philosopher</a></p></td>
                        <td><p><a href="#">Marathon Runner</a></p></td>
                        <td><p><a href="#">Three Musketeer</a></p></td>
                        <td><p><a href="#">Relationship Builder</a></p></td>
                        <td><p><a href="#">Work-Life Balancer</a></p></td>
                        <td><p><a href="#">Behind The Scenes</a></p></td>
                        <td><p><a href="#">Measured Progresser</a></p></td>
                        <td><p><a href="#">Last Minute</a></p></td>
                        <td><p><a href="#">Persuader</a></p></td>
                        <td><p><a href="#">Revealer</a></p></td>
                        <td><p><a href="#">Diamond</a></p></td>
                        <td><p><a href="#">Eternal Student</a></p></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

JS：

        var tableId = 'teamTable';

        var oTable = $('#' + tableId).dataTable({
            "sScrollX": "100%",
               <!--  "sScrollXInner": "150%", -->
                "bScrollCollapse": true,
                "bPaginate": false
        });

    <!--    new FixedColumns(oTable); -->

这是 JSFiddle 上的测试用例http://jsfiddle.net/tazmaniax/KFxbL/以及相关的调试信息http://debug.datatables.net/unovum

在这个测试用例中，我使用了 datatables 1.9.4 和最新的 datatables bootstrap css 和 js 文件（https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/2）。我还使用 dataTables 1.10 进行了测试，没有任何改进。

最终，我还希望启用 "sScrollXInner": "150%" 和 FixedColumns，但这样做只会让情况变得更糟。

我已经将它交叉发布到 dataTables 论坛，http: //datatables.net/forums/discussion/comment/52776#Comment_52776

2013 年 15 月 10 日更新：

显然，问题归结为 M30 分支中 Chrome 中的一个错误，该错误是作为优化的一部分引入的。现在正在分发修复程序。见http://datatables.net/forums/discussion/17714#Item_15 见https://code.google.com/p/chromium/issues/detail?id=290399

4

1 回答 1

0

我在同样的问题上苦苦挣扎，在阅读了很多帖子后，问题是如何“解决”的。

  • 添加到 CSS 中：

    .scrollStyle { overflow-x:auto; }

  • 调用dataTable后在视图中添加：

    jQuery('.dataTable').wrap('<div class="scrollStyle" />');

例如。oTable = $('#myDataTable').dataTable({ });

$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
});
jQuery('.dataTable').wrap('<div class="scrollStyle" />');
于 2014-02-12T17:01:21.750 回答