使用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 & 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 & 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
在这个测试用例中，我使用了数据表1.9.4和最新的数据表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
显然，这个问题归结为M30分支中的Chrome中的一个错误，该错误是作为优化的一部分引入的。现在正在传播解决方案。 见http://datatables.net/forums/discussion/17714#Item_15 见https://code.google.com/p/chromium/issues/detail?id=290399
答案 0 :(得分：0)
我正在努力解决同样的问题，在阅读了很多帖子后，问题是如何“修复”。
加入CSS：
.scrollStyle { overflow-x:auto; }
在调用dataTable后添加视图：
jQuery('.dataTable').wrap('<div class="scrollStyle" />');
EG。 oTable = $（'＃myDataTable'）。dataTable（{ }）;
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
});
jQuery('.dataTable').wrap('<div class="scrollStyle" />');